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 期望一个数组，并且正在获取一个Object，因此出现了错误。我尝试删除 async ，但没有任何积极结果。我试图直接从组件和许多其他解决方案中获取JSON文件，但都没有取得相对成功。我很确定这只是我所缺少的概念问题，还是只是分散注意力的错误。

Answer 1

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

您可以使用地图运算符在最初的http调用中返回actions属性：

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;
    });
}

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

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

1 个答案: