Динамическое редактирование / удаление данных с использованием материала Angular, т.е. обновление источника данных - PullRequest
Новая
       58

Динамическое редактирование / удаление данных с использованием материала Angular, т.е. обновление источника данных

0 голосов
/ 18 июня 2019

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

1 Ответ

0 голосов
/ 18 июня 2019

Как только mat-table соединяется с источником данных, вы можете предоставить только новую информацию через сам источник данных.

Я рекомендую вам использовать @matheo/datasource, чтобы четко разделить проблемы, манипулировать вашими данными только в соответствующих службах (база данных и источник данных), не беспокоясь о внедрении новых функций, и просто вызывая reload(), когда вам нужно обновить список после некоторой редакции / удаления.

Я написал об этой библиотеке и создал дружественную демонстрацию:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6

Я могу поддержать ваш вариант использования, если вам это нравится.
Удачного кодирования!

...