angular - 异步管道在 Angular 6 中获取 [object Object]

问题描述

我正在尝试在我的项目中实现“ag-Grid”，并尝试通过从本地 JSON 模拟文件中获取数据来填充它。

考虑到这是我第一次使用“ag-Grid”，而且我刚开始使用 Angular 6 体验，这就是我迄今为止所拥有的。

这是我的JSON 对象的结构

{
  "response": {
    "code": 200,
    "body": {
      "email": "email@email.com",
      "displayName": "User 1",
      "actions": [
        {
            "note": "some note",
            "author": {
              "displayName":"James Potter"
            },
            "createdAt": "1520262442000",
            "updateAt": "20180203073000"
        },
        {
            "note": "Some note",
            "author": {
              "displayName":"Bilbo Bagins"
            },
            "createdAt": "1496672283000",
            "updateAt": "20180203073000"
        }
      ]
    }
  }
}

这是我的组件

export class MockupViewComponent implements OnInit {

    columnDefs = [
        {headerName: 'Name',        field: 'response.body.actions.author.displayName'},
        {headerName: 'Status',      field: 'response.body.actions.note'},
        {headerName: 'Log Date',    field: 'response.body.actions.createdAt'},
        {headerName: 'Update Date', field: 'response.body.actions.updateAt'}
    ];

    rowData: any;

    constructor( public mockGetService: MockupParseService ) {
    }

    ngOnInit() {
        this.mockGetService.getJSON().subscribe(data => {
            this.rowData = data;
        });
    }
}

这是我的 JSON 获取服务

export class MockupParseService {  // ReadMockService
  constructor(private http: HttpClient) {
  }

  getJSON(): Observable<any> {
    return this.http.get('./assets/mockup/history.json');
  }
}

最后，这是我的模板

<ag-grid-angular
        style="width: 1000px; height: 500px;"
        enableSorting="true"
        enableFilter="true"
        class="ag-theme-balham"
        [rowData]="rowData | async"
        [columnDefs]="columnDefs"
></ag-grid-angular>

我遇到的问题是rowData。把它当作一个普通的 {{rowData | async}} 插值。

我知道异步排序需要一个数组并且它得到一个对象，因此出现错误。我尝试删除异步但没有积极的结果。我试图直接从组件和其他一些解决方案中获取 JSON 文件，但没有相对成功。我很确定这要么是我缺少的概念问题，要么只是分散注意力的错误。

标签： angulartypescriptangular6ag-grid

异步管道不需要数据类型，它用于处理（通常）异步数据的可观察对象，例如 HTTP 调用。如果您订阅 observable，则需要取消订阅组件销毁生命周期挂钩，以防止异步管道为您处理的内存泄漏。

actions您可以使用 map 运算符在初始 http 调用中返回属性：

getJSON(): Observable<any> {
   return this.http.get('./assets/mockup/history.json').pipe(map(res => res.actions))
}

或按原样订阅数据，但传入正确的道具：

ngOnInit() {
    this.mockGetService.getJSON().subscribe(data => {
        this.rowData = data.actions;
    });
}

在组件中订阅 observable 时，不要在模板中使用异步管道。仅将其用于将 observable 直接传递给输入。

angular - 异步管道在 Angular 6 中获取 [object Object]

问题描述

解决方案

推荐阅读