асинхронный канал получает [объект Object] в Angular 6

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 get

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-вызов. Если вы подпишетесь на наблюдаемое, вам нужно будет отменить ответ на хуке уничтожения жизненного цикла компонентов, чтобы предотвратить утечки памяти, о которых позаботится асинхронный канал.

Вы можете использовать оператор карты для возврата свойства actions в начальном вызове 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;
    });
}

Когда вы подписываетесь на наблюдаемое в компоненте, не используйте асинхронный канал в шаблоне. Используйте его только для прямой передачи наблюдаемого на вход.