MatTableDataSource - как обновить таблицу при добавлении новой записи на сервер - PullRequest
0 голосов
/ 31 мая 2018

У меня отлично работает сбор данных, но я не могу выполнить перезагрузку после добавления новой записи.Насколько мне известно, всякий раз, когда вызывается следующий метод для субъекта поведения, все наблюдатели получают уведомление об этом, и перезагрузка данных происходит автоматически.Но так не происходит.

Component.ts

dataSource = new MatTableDataSource<IWorkOrders>();
  ngOnInit() {
    this.bs.wobSubject$.subscribe((data:IWorkOrders[]) => {
      this.dataSource.data = data;
    })

Вот код, вызываемый для публикации новой записи

this.bs.postWorkOrder(this.saleForm.value);

Service.ts

      public wobSubject$ = new BehaviorSubject<IWorkOrders[]>([]);
    constructor(private http: HttpClient) {
     this.getWorkOrder(); 
    }
      getWorkOrder() {
        this.http.get(this.BASE_URL + '/getworkorders/')
        .subscribe((data:IWorkOrders[]) => {
          this.wobSubject$.next(data);
        });
      }
  postWorkOrder(workOrder: IWorkOrders) {
    this.http.post<IWorkOrders>(this.BASE_URL + '/addworkorder/', workOrder)
    .subscribe((data: any) => {
      this.wobSubject$.next(data);
    });
  }

Ответы [ 2 ]

0 голосов
/ 31 мая 2018
this.bs.wobSubject$.subscribe((data:IWorkOrders[]) => {
  this.dataSource.data = data;
})

Angular предоставляет абстракцию источника данных, вы не должны в него вмешиваться.

Попробуйте использовать это вместо этого.

this.bs.wobSubject$.subscribe((data:IWorkOrders[]) => {
  this.dataSource = new MatTableDataSource(data);
})
0 голосов
/ 31 мая 2018

Вам снова позвонят getRequest после публикации новой записи на сервере, как это -

 getWorkOrder() {
        this.http.get(this.BASE_URL + '/getworkorders/')
        .subscribe((data:IWorkOrders[]) => {
          this.wobSubject$.next(data);
        });
      }
  postWorkOrder(workOrder: IWorkOrders) {
    this.http.post<IWorkOrders>(this.BASE_URL + '/addworkorder/', workOrder)
    .subscribe((data: any) => {
      this.getWorkOrder()
    });
  }
...