Таблица угловых материалов не будет заполняться внешними данными при начальной загрузке

Question

Я работаю над проектом Angular 6, в который загружаю данные из таблицы AWS DynamoDB через Observable в компонент Material Table.Я использовал angular-cli для генерации начальной структуры таблицы, а затем добавил свой собственный сервис для извлечения внешних данных, поскольку в примере использовались жестко закодированные данные в массиве.

Кажется, все работает (яможет видеть правильные данные, возвращаемые через console.log), за исключением того факта, что при моей начальной загрузке данные, которые я возвращаю из наблюдаемой, не попадают в таблицу.На самом деле, если я проверяю переменную «this.data», кажется, что она немедленно возвращается в «неопределенное».Если я выбираю и изменяю количество результатов на страницу в компоненте разбивки на страницы, вставляются данные, возвращаемые наблюдаемой.

connect(): Observable<DynamoTableItem[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
        observableOf(this.data),
        this.paginator.page,
        this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
        return this.getPagedData(this.getSortedData([...this.data]));
    }));
}

Я бы поставил проект на стекаблиц, если кто-то не противпосмотрите.

Чтобы воспроизвести проблему:

1. Перейдите: https://stackblitz.com/edit/mat-table-dynamo
2. Обратите внимание, что в таблице нет данных.
3. Выберитераскрывающееся меню "Элементы на странице" и измените его на другое значение.
4. Таблица заполняется данными, возвращаемыми из наблюдаемой.

Спасибо за помощь!

Answer 1

Практическое правило написания любого сервиса на английском языке заключается в том, что если у вас есть .subscribe() внутри вашего сервиса, вы, вероятно, (99%) делаете это неправильно.Всегда возвращайте и Observable, и пусть ваш компонент выполняет .subscribe().

. Причина, по которой ваш код не работает, заключается в том, что вы сначала подписываете свои данные внутри службы, изатем повторно оберните это, используя Observable.of().Это не сработает, потому что ваш http вызов асинхронный.К тому времени, когда ваша подписка внутри вашего конструктора получит излучение, ваш connect уже давно установлен и this.data сначала не определен, прежде чем ему могут быть присвоены какие-либо значения.

Чтобы решить вашу проблему, просто измените of(this.data) к исходному Observable источнику, и все работает:

connect(): Observable<DynamoTableItem[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
        this.dynamoService.getData(this.params),
        this.paginator.page,
        this.sort.sortChange
    ];

    // Set the paginators length 
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map((received) => { 
        return this.getPagedData(this.getSortedData([...received]));
    }));
}

Вот рабочий рабочий StackBlitz