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

Question

我正在尝试将 "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}} 插值。

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

Answer 1

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

您可以在初始 http 调用中使用地图运算符 return actions 属性：

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

或者直接订阅数据，但是传入正确的prop：

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

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

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

async pipe gets [object Object] in Angular 6

typescript

ag-grid

angular

angular6