MatTableDataSource - 如何在将新记录添加到服务器时刷新表

时间:2018-05-31 07:52:39

标签: angular angular-material rxjs6

我的数据拉动完全正常,但在添加新记录后无法完成重新加载工作。据我所知,每当在行为主题上调用下一个方法时,所有观察者都会收到通知,并且数据重新加载会自动发生。但不会那样发生。

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 :(得分:2)

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

Angular提供了数据源的抽象,你不应该把它弄乱。

请尝试使用此功能。

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

答案 1 :(得分:1)

在将新记录发布到服务器之后再次呼叫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()
    });
  }