Angular 角度2：异步数据故障

我做了一个提供数据的服务。当我直接返回数据时，它会起作用：

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文件数据用于ag网格（默认的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();
            }
    };
}

编辑

我的模板：

<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()">

提前谢谢

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

此方法正在返回一个承诺，因此，调用方法将需要使用该承诺来获取数据

因此，调用

\u getDataFromJson（url）

看起来像这样：

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

或者，由于您使用的是Typescript，因此可以使用async/await：

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

---

foo

或

food

？一定有人饿了；-）非常感谢。当我尝试第一个解决方案时，我得到一个错误：error_handler.js:50 EXCEPTION:Uncaught（承诺中）：错误：./myComponent类中的错误myComponent-内联模板：0:0原因：无法读取未定义的属性“forEach”错误：./myComponent类中的错误myComponent-内联模板：0:0原因：无法读取未定义的属性“forEach”您能提供更多实现详细信息吗？您提供的代码片段似乎没有显示您实际如何使用此方法。此外，可能还有您可以提供的任何html/模板代码。所有FakeData方法都返回此。我已经添加了我的模板。如果您使用了第一个解决方案，那么您的fakeData方法可能也会返回承诺。很抱歉，很难说发生了什么。根据您编写此代码的方式，您可能还需要将fakeData方法作为承诺来处理。此外，不确定您是否看到了这一点，但可能此ext可以帮助您检查绑定到组件元素的内容：

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