Я использую мат-таблицу для перечисления содержания языков, выбранных пользователем. Они также могут добавлять новые языки с помощью диалоговой панели. После добавили язык и вернули обратно. Я хочу, чтобы мой источник данных обновился, чтобы отобразить внесенные изменения.
Я инициализирую хранилище данных, получая пользовательские данные из службы и передавая их в источник данных в методе обновления.
Language.component.ts
import { Component, OnInit } from '@angular/core';
import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';
import { LanguageAddComponent } from './language-add/language-add.component';
import { AuthService } from '../../../../services/auth.service';
import { LanguageDataSource } from './language-data-source';
import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { MatSnackBar, MatDialog } from '@angular/material';
@Component({
selector: 'app-language',
templateUrl: './language.component.html',
styleUrls: ['./language.component.scss']
})
export class LanguageComponent implements OnInit {
displayedColumns = ['name', 'native', 'code', 'level'];
teachDS: any;
user: any;
constructor(private authService: AuthService, private dialog: MatDialog) { }
ngOnInit() {
this.refresh();
}
add() {
this.dialog.open(LanguageAddComponent, {
data: { user: this.user },
}).afterClosed().subscribe(result => {
this.refresh();
});
}
refresh() {
this.authService.getAuthenticatedUser().subscribe((res) => {
this.user = res;
this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);
});
}
}
язык-данные-источник.ts
import {MatPaginator, MatSort} from '@angular/material';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
export class LanguageDataSource extends DataSource<any> {
constructor(private languages) {
super();
}
connect(): Observable<any> {
return Observable.of(this.languages);
}
disconnect() {
// No-op
}
}
Поэтому я попытался вызвать метод обновления, в котором я снова получаю пользователя из серверной части, а затем повторно инициализирую источник данных. Однако это не работает, никаких изменений не происходит.
Ответы:
Запустите обнаружение изменений, используя
ChangeDetectorRef
вrefresh()
методе сразу после получения новых данных, введите ChangeDetectorRef в конструктор и используйте detectChanges следующим образом:источник
Я не знаю,
ChangeDetectorRef
требовалось ли это при создании вопроса, но теперь этого достаточно:Пример:
StackBlitz
источник
MatTableDataSource.paginator
свойству после того, как представление Paginator было инициализировано. См. Описаниеpaginator
свойства здесь: material.angular.io/components/table/api#MatTableDataSourceТак что для меня никто не дал хорошего ответа на проблему, с которой я столкнулся, которая почти такая же, как @Kay. Для меня это про сортировку, в таблице сортировки не происходит изменений в мате. Я намерен ответить на этот вопрос, поскольку это единственная тема, которую я нахожу с помощью поиска в Google. Я использую Angular 6.
Как сказано здесь :
Поэтому вам просто нужно вызвать renderRows () в методе refresh (), чтобы изменения появились .
См. Здесь для интеграции.
источник
Поскольку вы используете
MatPaginator
, вам просто нужно внести какие-либо изменения в пагинатор, это приведет к перезагрузке данных.Простой трюк:
Это обновляет размер страницы до текущего размера страницы, поэтому в основном ничего не меняется, кроме
_emitPageEvent()
вызова частной функции, запускающей перезагрузку таблицы.источник
_changePageSize()
разве не общественное право? Насколько безопасно использовать? Подробнее на stackoverflow.com/questions/59093781/…Добавьте эту строку под действием добавления или удаления конкретной строки.
источник
Лучший способ сделать это - добавить дополнительную наблюдаемую в вашу реализацию Datasource.
В методе подключения вы уже должны использовать
Observable.merge
для подписки на массив наблюдаемых, которые включают paginator.page, sort.sortChange и т. Д. Вы можете добавить к нему новую тему и вызывать ее, когда вам нужно вызвать обновление.что-то вроде этого:
А затем вы можете позвонить,
recordChange$.next()
чтобы инициировать обновление.Естественно, я бы обернул вызов в метод refresh () и вызвал бы его из экземпляра источника данных с компонентом и другими подходящими методами.
источник
Property 'connect' in type 'customDataSource<T>' is not assignable to the same property in base type 'MatTableDataSource<T>'. Type '() => Observable<any>' is not assignable to type '() => BehaviorSubject<T[]>'. Type 'Observable<any>' is not assignable to type 'BehaviorSubject<T[]>'. Property '_value' is missing in type 'Observable<any>'.
Вы можете просто использовать функцию подключения источника данных
вот так. 'data' - новые значения для таблицы данных
источник
Вы можете легко обновить данные таблицы с помощью "concat":
например:
language.component.ts
language.component.html
И, когда вы обновляете данные (language.component.ts):
Когда вы используете "concat" angular, обнаруживайте изменения объекта (this.teachDS), и вам не нужно использовать что-то еще.
PD: У меня работает в angular 6 и 7, другую версию не пробовал.
источник
Ну, я столкнулся с аналогичной проблемой, когда я что-то добавил в источник данных, и он не перезагружается.
Самый простой способ, который я нашел, - это просто переназначить данные
источник
В Angular 9 секрет в том, что
this.dataSource.data = this.dataSource.data;
Пример:
источник
Вы также можете использовать метод renderRows ().
@ViewChild (MatTable, {static: false}) table: MatTable // инициализировать
затем this.table.renderRows ();
для справки проверьте это -: https://www.freakyjolly.com/angular-7-8-edit-add-delete-rows-in-material-table-with-using-dialogs-inline-row-operation/
источник
Я нашел хорошее решение, используя два ресурса:
обновление как dataSource, так и paginator:
где, например , DataSource определяется здесь:
источник
источник
в моем случае (Angular 6+) я унаследовал от
MatTableDataSource
to createMyDataSource
. Без звонка послеthis.data = someArray
данные где не отображаются
класс MyDataSource
источник
Есть два способа сделать это, потому что Angular Material несовместим, и это очень плохо документировано. Таблица материалов Angular не обновляется при поступлении новой строки. Удивительно, но это связано с проблемами производительности. Но это больше похоже на конструктивную проблему, они не могут измениться. Следует ожидать, что таблица обновится при появлении новой строки. Если это поведение не должно быть включено по умолчанию, должен быть переключатель, чтобы выключить его.
В любом случае, мы не можем изменить Angular Material. Но мы можем использовать для этого очень плохо документированный метод:
Один - если вы используете массив непосредственно в качестве источника:
где table - это ViewChild мат-таблицы
Во-вторых, если вы используете сортировку и другие функции
table.renderRows () на удивление не работает. Потому что мат-таблица здесь несовместима. Вам нужно использовать хак, чтобы сообщить об изменении источника. Вы делаете это с помощью этого метода:
где dataSource - это оболочка MatTableDataSource, используемая для сортировки и других функций.
источник
Это сработало для меня:
источник
Я думаю, что
MatTableDataSource
объект каким-то образом связан с массивом данных, который вы передаетеMatTableDataSource
конструктору.Например:
Итак, когда вам нужно изменить данные; изменить исходный список,
dataTable
а затем отразить изменение в таблице методом вызова_updateChangeSubscription()
ontableDS
.Например:
Это работает со мной через Angular 6.
источник
_
и вы его называете?Это работает для меня:
Итак, вы должны объявить свой экземпляр источника данных как
MatTableDataSource
источник
Я провел еще несколько исследований и нашел это место, чтобы дать мне то, что мне нужно - кажется чистым и связано с обновлением данных при обновлении с сервера: https://blog.angular-university.io/angular-material-data-table/
Большинство кредитов на странице выше. Ниже приведен пример того, как можно использовать селектор матов для обновления таблицы матов, привязанных к источнику данных, при изменении выбора. Я использую Angular 7. Извините за обширность, попытку быть полной, но краткой - я удалил как можно больше ненужных частей. С этим надеясь помочь кому-то еще быстрее продвигаться вперед!
organization.model.ts:
organization.service.ts:
organizationdatasource.model.ts:
organization.component.html:
organization.component.scss:
organization.component.ts:
источник
После прочтения таблицы материалов, не обновляющей данные публикации, обновление # 11638 Отчет об ошибке, я обнаружил, что лучшее (читай, самое простое решение) было предложено последним комментатором «shhdharmen» с предложением использовать EventEmitter.
Это включает в себя несколько простых изменений в сгенерированном классе источника данных.
т.е.) добавьте новую частную переменную в свой класс источника данных
и когда я помещаю новые данные во внутренний массив (this.data), я генерирую событие.
и, наконец, измените массив dataMutation в методе connect следующим образом
источник
// это источник данных
this.gests = [];
this.gests.push ({id: 1, name: 'Ricardo'});
// обновляем источник данных this.gests = Array.from (this.guest);
источник
Я выпустил библиотеку, призванную стать официальным источником данных материала в будущем, поддерживающую любые типы входных потоков (сортировка, разбиение на страницы, фильтры) и некоторую конфигурацию с отладкой, чтобы увидеть, как это работает, пока вы кодируете.
Вы можете найти демонстрацию StackBlitz и дополнительную информацию здесь:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6
Буду рад услышать ваше мнение и при необходимости поддержать ваши варианты использования.
Удачного кодирования!
источник
Я пробовал ChangeDetectorRef, Subject и BehaviourSubject, но что у меня работает
источник