更新数据后刷新材料表

Question

我已经创建了一个角度应用程序(使用asp.net web )来插入和更新数据，这是在mat表中列出的。单击“编辑”按钮时，将打开一个对话框，并可以编辑所需的值。但问题是，当我单击保存弹出关闭和表不更新时。

这是我的ts文件

save() {
    this.form.value.id = this.id;
    this.service.updateEntry(this.id, this.form.value).subscribe((data) => {
      console.log(data);
      this.dialogRef.close(data);
      this.dialogRef.afterClosed().subscribe(() => { this.service.getAll(); } );
    });    
  }

这是我的服务

getAll(){
    return this.http.get(this.baseUrl);
  }

updateEntry(id, entry){
    return this.http.put(this.baseUrl+'/'+id, entry)
  }

关于初始化

ngOnInit() {
    this.service.getAll().subscribe((data) => {
      console.log(data);
      this.dataSource = new MatTableDataSource<EntryElement>(data as EntryElement[])
    })
  }

并更新条目

updateEntry(entry) {
    console.log(entry);
    this.dialog.open(UpdateEntryComponent, {
      data: {
        Id: entry.Id,
        Description: entry.Description,
        IsExpense: entry.IsExpense,
        Value: entry.Value
      }
    })
  }

Answer 1

使用afterClosed()的最佳方式是可以观察到的

updateEntry(entry) {
    console.log(entry);
    this.dialog.open(UpdateEntryComponent, {
      data: {
        Id: entry.Id,
        Description: entry.Description,
        IsExpense: entry.IsExpense,
        Value: entry.Value
      }
    }).afterClosed().subscribe(result => {
      this.service.getAll().subscribe((data) => {
        this.dataSource = new MatTableDataSource<EntryElement>(data as EntryElement[])
      })
    });
  }

Answer 2

mat表有一个常见问题，如果您正在更新数据源，而不是更新表

const temp =  JSON.stringify(data);
data = JSON.parse(temp)

你试过这个吗？