각도 2 : 비동기 데이터 문제

Question

데이터를 제공하는 서비스를 만들었습니다.

When I return directly the data, it works. Like that : 

return [ 
      { 
       "prop1": "value1", 
       "prop2": "value2" 
      }, 
      { 
       "prop1": "value3", 
       "prop2": "value6" 
      } 
     ]; 

을하지만이 JSON 파일에서 그들을 얻을하려고 할 때, 그렇지 않습니다 : 내가 직접 데이터를 반환 할 때 작동

// Get Data from JSON 
private _getDataFromJson(url: string) { 
    return this.http.get(url) 
       .toPromise() 
       .then(res => res.json()) 
       .then(data => { return data; }) 
} 
// I also tested that 
/*return this.http.get(this._generateUrl(type, 'column-def')) 
      .map(res => res.json());*/ 

내가 그 JSON 파일 datas를 들어 사용하고 있습니다 그리드 (default colDef, colDef, floatingTopRows 및 datasource). 그게 관련이 있는지 아닌지 나는 잘 모르겠습니다. 그런

내 코드 조회 :

ngOnInit() { 
    this.defaultColDef = this.FakeData.getColumnDefDefault(); 
    this.colDef = this.FakeData.getColumnDef(this.dataType); 
    this.floatingTopRowData = this.FakeData.getFloatingTopRows(this.dataType); 
    this.allOfTheData = this.FakeData.getData(this.dataType); 

    this.gridOptions = <GridOptions> { 
      onGridReady:() => { 
       this._populateData(); 
      } 
    }; 
} 

기타 관련 방법 :

_populateData(): void { 
    this.allOfTheData.then(rowData => { 
     this._setRowData(rowData); 
     this.pageSizes = this._generatePageSizes(rowData.length); 
    }); 
} 

_setRowData(rowData): void { 
    this.allOfTheData = rowData; 
    this._createNewDatasource(); 
} 

_createNewDatasource(): void { 
    if(!this.allOfTheData) return; 

    let dataSource = { 
     getRows: (params: any) => { 
      this.sortedAndFilteredData = this._sortAndFilter(params.sortModel, params.filterModel); 
      let rowsThisPage = this.sortedAndFilteredData.slice(params.startRow, params.endRow); 
      params.successCallback(rowsThisPage, this.sortedAndFilteredData.length); 
     } 
    }; 

    this.gridOptions.api.setDatasource(dataSource); 
} 

편집

내 템플릿 :

<ag-grid-ng2 #agGrid [id]="id" style="width: 100%;" [style.height.px]="gridHeight" class="ag-bootstrap" (modelUpdated)="setHeight()" 
[gridOptions]="gridOptions" 
[defaultColDef]="defaultColDef" 
[columnDefs]="colDef" 
[floatingTopRowData]="floatingTopRowData" 
enableColResize 
enableServerSideSorting 
enableServerSideFilter 
suppressDragLeaveHidesColumns 
suppressMultiSort 
rowModelType="pagination" 
[headerHeight]="headerHeight" 
[rowHeight]="rowHeight" 
rowSelection="multiple" 
(dragStopped)="_onColumnMoved()" 
(selectionChanged)="_onSelectionChanged()"> 

미리 감사드립니다.

Answer 1

private _getDataFromJson(url: string) { 
    return this.http.get(url) 
      .toPromise() 
      .then(res => res.json()) 
      .then(data => { return data; }) 
} 

이 메서드는 약속을 반환하므로 호출 메서드는 약속을 사용하여 데이터를 가져와야합니다.

그래서 같은 것을 보일 것이다 _getDataFromJson(url) 전화 :

this._getDataFromJson(someUrl).then(data => this.foo = data); 

아니면 타이프 라이터를 사용하고 있기 때문에, 당신은 비동기/await를 사용할 수 있습니다

this.foo = await this._getDataFromJson(someUrl); // don't forget the async keyword on the enclosing method