更新方法角json服务器答案

【问题标题】：update method angular json server更新方法角json服务器
【发布时间】：2021-11-22 08:27:11
【问题描述】：

我想在不刷新页面的情况下更新我的表格，但我不知道该怎么做，因为我是初学者。在我的示例中，我使用了有角材料的表格。

如何在每次添加新元素时更新我的页面？

服务

  public url: string = 'http://localhost:3000/tableInfos';

  constructor(private http: HttpClient) { }

  getTableDetails(): Observable<PeriodicElement> {
    return this.http.get<PeriodicElement>(this.url);
  }

  create(name: PeriodicElement): Observable<any> {
   let newName = {name:name}
    return this.http.post<PeriodicElement>(this.url, newName);
  }

ts.file

  ELEMENT_DATA!: PeriodicElement[]
  displayedColumns: string[] = ['name'];
  dataSource = new MatTableDataSource<PeriodicElement>(this.ELEMENT_DATA);

  constructor(private tableService: TableService) {}

  ngOnInit(): void {
    this.get();
  }

  get() {
    this.tableService.getTableDetails().subscribe((data:any) => {
      this.dataSource.data = data;
    });
  }

  add(name: any) {
    this.tableService.create(name).subscribe((data:any) => {
      console.log(data);
    });
  }

json

{
  "tableInfos": [
    {
      "id": 1,
      "name": "Hydrogen"
    },
    {
      "id": 2,
      "name": "Helium"
    }
  ]
}

界面

export interface PeriodicElement {
  name: string;
}

【问题讨论】：

我认为 this.datasource.data = [...data] 应该可以工作（刷新参考）。否则有renderRows 和ChangeDetectorRef 作为选项。

标签： javascript angular typescript angular-material

【解决方案1】：

只要在 ts 的更新函数中使用this.dataSource.data = res即可。

【讨论】：