У меня есть компонент, который наблюдает за потоком данных и фильтрует его. Этим отфильтрованным данным присваивается атрибут data для MatTableDataSource, называемый this.filteredData, который используется в качестве ввода для MatTable компонента. Данные обновляются от родительского компонента, и изменения обнаруживаются следующим образом:
/** `this.dataSource` in this case is another MatTableDataSource */
this.dataSource.connect().subscribe( () => {
this.filterData(); // sets the value of this.filteredData.data
} );
У меня есть сортировка, фильтрация и т. Д. c. Настроить на таблице отлично, и он без проблем подписывается на обновления.
@ViewChild (MatSort ...)... в компоненте обеспечивает this.sort, который используется как атрибут sort *1013*.
У меня есть @Output от компонента, который выдает текущее Sort состояние таблицы, т. Е. Если пользователь нажимает на столбец и меняет сортировку, используя
this.filteredDataSource.sort.sortChange.subscribe( sort => {
this.sortChanged.emit( sort );
} );
в компоненте ngAfterViewInit().
Цель состоит в том, чтобы параметры сортировки могли быть переданы в компонент вне.
Вот одна ошибка с этим подходом, которую я не могу решить:
Когда this.filteredData.data обновляется после инициализации, this.sort испускает sortChange для состояния сортировки, которого у него нет (кажется, направление asc в первом столбце / атрибуте). Родительский компонент получает это неправильное состояние, что означает, что если он будет сохранен и использован позже, он будет некорректным. Это sortChange отправляется даже после того, как правильно сохраненное состояние Sort применяется к this.filteredData после его обновления, если я не использую какое-то время ожидания, которое кажется случайным.
Имитация потока:
this.filteredDataSource.data = this.dataSource.data.concat();
this.filterForms.forEach( filterForm => {
... //(apply filtering based on the form's selection)
this.filteredDataSource.data = this.filteredDataSource.data.filter(...)
} );
const sort = ( { id: `date`, start: `desc` } ) as MatSortable;
this.sort.sort( sort );
Генератор событий sortChange затем излучает:
-> {active: "date", direction: "desc"}
-> {active: "id", direction: "asc"}
(в данном случае id - первый столбец таблицы)
Там в коде нет ничего, что могло бы испустить эту секунду sortChange. Angular испускает это, потому что загружает строку заголовка или что-то? Я не смог решить это.