Question

我创建了一个有角度的（使用asp.net Web API）应用程序来插入和更新在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

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

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

您尝试过

Answer 2

请检查您是否正在使用 dataSource ，它是否正在更新。

如果不更新 this.dataSource =新的MatTableDataSource（ res ）;

其中 res 是getAll结果

Answer 3

可观察到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[])
      })
    });
  }

更新数据后刷新物料表

3 个答案: