Question

我相当确定这与范围问题有关，但是我在网上找不到任何相关信息。我有一项服务，该服务可从API返回基本的Observable，该API包含我想用来更新rowData变量的数据。

MyService.ts

 fetchDummyData(): Observable<DummyResponse[]> {
    return this.http.get<DummyResponse[]>('***SOME_API***');
 }

MyComponent

如果我尝试在此处向rowData添加数据，则网格不会更新

rowData = [];
/////////////
////////////Other stuff

this.myService.fetchDummyData().subscribe(
  data => {
    for (let i = 0; i < data.length; i++) {
      this.rowData.push(
        {
          idType: 'ID Type ' + (i + 1),
          description: 'adfasdf'
        }
      )
      //This log prints the correct thing, but rowData remains empty outside the loop
      console.log('Row id: ' + this.rowData[i].idType);
    }
  }
)

但是如果我在上面的订阅调用之后添加它，它将起作用。

rowData = [];
/////////////
////////////Other stuff

this.myService.fetchDummyData().subscribe(
  data => {
    for (let i = 0; i < data.length; i++) {
        //Do Nothing
    }
  }
)

//This actually updates the rowData
this.rowData.push(
    {
      idType: 'ID Type ' + (i + 1),
      description: 'adfasdf'
    }
  )

为什么rowData不能在订阅调用中全局更新？

Answer 1

您可以在订阅者内部使用api.setRowData(newData)。

this.myService.fetchDummyData().subscribe(
    data => {
    let rows = [];
    for (let i = 0; i < data.length; i++) {
        rows.push({
            idType: 'ID Type ' + (i + 1),
            description: 'adfasdf'
        });
    }
    this.gridApi.setRowData(rows);
  }
)

Answer 2

在订阅中，您应该致电markForCheck更改检测。

constructor(
 private cd: ChangeDetectorRef
) { }

ngOnInit() {
  this.myService.fetchDummyData().subscribe(
    data => {
      for (let i = 0; i < data.length; i++) {
        this.rowData.push(
          {
            idType: 'ID Type ' + (i + 1),
            description: 'adfasdf'
          }
        )
        this.cd.markForCheck()  // Add this code.
      }
    }
  )
}

否则，您需要存储网格的API并显式调用gridApi.setRowData(this.rowData)。

AgGrid rowData在Observable对象的“订阅”调用中未更新

2 个答案: