Angular查询单条ID数据后如何在MatTable中展示而非仅输入框

问题场景 #

Angular项目已完成与数据库API对接，全量数据可正常在MatTable中展示；但查询单个RUT（ID）的数据时，仅能通过[(ngModel)]绑定到input元素显示，无法将该单条数据渲染到MatTable列中。

核心原因 #

MatTable的dataSource要求接收数组类型的数据，当前仅将单条数据赋值给elector变量，未同步更新dataSource。

解决方案 #

在API返回单条数据后，将该数据包装为数组并赋值给dataSource.data即可。

修改Component代码 #

在getElector的订阅回调中，添加对dataSource的赋值：

this.electorService.getElector(this.electorrut)
  .subscribe(
    (successResponse) => {
      this.elector = successResponse;
      // 将单条数据包装成数组，赋值给dataSource
      this.dataSource.data = [this.elector];
    }
  );

修正HTML语法错误 #

原HTML中matRowDef的引号存在语法问题，修正为：

<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

补充说明 #

• MatTable会自动监听dataSource.data的变化并刷新表格，无需额外调用刷新方法
• 确保displayedColumns数组中的字段与Elector模型的属性完全匹配，否则对应列将无法渲染内容

内容的提问来源于stack exchange，提问作者Daniela Quila