У меня есть проект угловых материалов, который требует от меня отображения списка автомобилей в таблице угловых материалов. Автомобили заполняются от основной части asp.net.
Пока что все работает как надо, за исключением динамического изменения / удаления автомобилей и внесения изменений на лету. По сути, я пытаюсь обновить источник данных.
Я следовал примеру с этого сайта => Angular + Material - Как обновить источник данных (mat-table) , но безуспешно.
Куда я иду не так?
До сих пор я пытался использовать этот код для обновления функции getAllCars() и функций редактирования и удаления:
this.datasource.connect().next(res);
и попробовал:
this.carModels= new MatTableDataSource<Element>(this.carModels);
Услуги
removeCarModel(id: number) {
return this.http.delete(this.URL+ 'cars/deleteCar/' + id);
}
getAllCarModels() {
return this.http.get(this.URL+ `cars/getAllCars`);
}
файл TS
getAllCars() {
this.carService.getAllCarModels().subscribe(
res => {
this.carModels = res;
this.dataSource= new MatTableDataSource();
this.dataSource.data = res;
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
// Tried the below. They don't work
// this.carModels = new MatTableDataSource<Element>(this.carModels );
// this.datasource.connect().next(res);
},
error => {
console.log("Error");
}
);
}
Удалить автомобиль
removeCar: any;
removeSelectedCar(id) {
this.carService.removeCarModel(id).subscribe(
res => {
this.removeCar = res;
// Tried the below. They don't work
// this.dataSource.connect().next(res);
// this.removeCar= new MatTableDataSource<Element>(this.removeCar);
console.log("Successfully deleted");
},
error => {
console.log("Error");
}
);
}
editCar: any;
editSelectedCar() {
this.carService.editCarModel(this.Id, this.carModel).subscribe(res=> {
console.log("Successfully edited");
this.editCar = res;
// Tried the below. They don't work
// this.dataSource.connect().next(res);
// this.editCar = new MatTableDataSource<Element>(this.editCar);
}, error => {
console.log("Error");
}
);
}