Angularhttp模擬

我正在嘗試為我的 ag 網格 rowData 模擬 http 請求呼叫。

這是資料服務類

@Injectable({
    providedIn: 'root',
})

export class KoeficijentiZaVodneLinijeData {

    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return new Observable<KoeficijentiZaVodneLinijeModel[]>((observer) => {
            of(new KoeficijentiZaVodneLinijeModel(0.00, 0.25)),
            of(new KoeficijentiZaVodneLinijeModel(0.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(0.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(0.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.00, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.25, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(1.50, 0.5)),
            of(new KoeficijentiZaVodneLinijeModel(1.75, 1.0)),
            of(new KoeficijentiZaVodneLinijeModel(2.00, 1.25)),
            of(new KoeficijentiZaVodneLinijeModel(3.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(4.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(5.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(6.00, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(7.00, 4.00)),
            of(new KoeficijentiZaVodneLinijeModel(8.00, 1.50)),
            of(new KoeficijentiZaVodneLinijeModel(4.50, 2.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.00, 0.75)),
            of(new KoeficijentiZaVodneLinijeModel(9.25, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(9.50, 0.50)),
            of(new KoeficijentiZaVodneLinijeModel(9.75, 1.00)),
            of(new KoeficijentiZaVodneLinijeModel(10.00, 0.25))
        });
    }
}

這是我打電話的地方

export class KoeficijentiZaVodneLinijeComponent implements OnInit {

  columnDefs: ColDef[]=[
    {field: 'r'},
    {field: 'y'},
    {field: 'x'},
    {field: 'xixi'},
    {field: 'koef'},
    {field: 'proizvod'},
    {field: 'deltaY'},
    {field: 'delta4y'},
    {field: 'proizvodSum'},
  ]

  rowData : Observable<KoeficijentiZaVodneLinijeModel[]>;
  constructor(private koeficijentiDataService: KoeficijentiZaVodneLinijeData) { }

  ngOnInit(): void {
    this.rowData = this.koeficijentiDataService.getData();
     
  }

}

我正在關注 ag grid 教程，在某些時候他們將 rowData 的型別切換為可觀察的。我的應用程式無需 http 請求即可運行，所有資料將由我提供。我不確定這是否是正確的方法所以請你幫忙

uj5u.com熱心網友回復：

讓我們深入了解您正在使用的模式：

第一個是new Observable(observer => {/* observable logic */})。這個“邏輯”將在訂閱時執行。所以observer.next(10)會發出事件10。observer.complete()將完成源代碼并希望釋放資源。使用他的可觀察建構式，您可以創建自己的可觀察物件，例如：

new Observable(observer => {
  observer.next(10);
  setTimeout(() => observer.next(20), 1000);
  setTimeout(() => observer.next(30), 2000);
});

此 observable 將10在訂閱時發出，然后在一秒鐘20后發出，再過一秒 - 30；但在絕大多數情況下new Observable(...)是不好的做法，因為已經有一個運營商這樣做了。

那么您正在使用of(data)- 它會創建一個僅發出data. 所以正確的用法是of([item1, item2, item3, ...]).

但我會稍微改進一下（考慮到當您切換到真實資料時會有延遲。最終實作將如下所示：

    getData(): Observable<KoeficijentiZaVodneLinijeModel[]>{
        return of([
            new KoeficijentiZaVodneLinijeModel(0.00, 0.25),
            new Koef....
        ]).pipe(delay(800)); // lets assume your mock API responds in 800 msec
    }

uj5u.com熱心網友回復：

首先，如果您只想提供靜態資料，則無需（感知）使用 observable。

關于手頭的問題：您要做的是創建一個 observable 來保存您的資料陣列。

您所做的是創建了一個return new Observable(observer => {...});不發出任何內容的新 observable ( )。為了讓它發出任何你需要呼叫的東西observer.next(<your data>)。

相反，您呼叫of(<one element of the desired array>)which 又會創建一個發出該值的 observable，但這些 observable 不再用于在您的“外部”可觀察物件中發出值。

一個可行的解決方案可能是

return new Observable (observer => {
    observer.next([<your data here>]);
    observer.complete(); // after emitting the values, your observable is finished
});

這是正確的，但相當麻煩。相反，of您已經使用的方法特別適合此任務。of回傳一個發出引數 [...] 然后完成的Observable。因此，您想要做的是：

return of([<your data here>]);

標籤：

上一篇：Angular-如何使用switchMap（合并兩個服務器回應）從WordpressRESTAPI獲取帖子和標簽名稱？

下一篇：createOrder中斷了paypalapi