Angular MatTableDataSource如何访问另一数组指定位置的enviado属性

你现在的问题根源是：服务返回的是包含两个数组的对象，但你直接把整个对象传给了MatTableDataSource，而这个组件的data属性需要的是数组类型数据。这就导致表格里的row对应的是整个对象，不是数组里的单个元素，自然拿不到row.enviado。

第一步：正确拆解服务响应 #

先明确服务返回的结构（比如类似下面这样）：

// 假设服务返回的对象结构
{
  主数组: [...], // 你原本要展示在表格里的数组
  目标数组: [{ enviado: 1 }, ...] // 你要获取enviado的那个数组
}

修改组件代码，先从响应里提取对应的数组：

buscarAcordos() {
  this.acordoComercialService.buscarAcordosComerciais().subscribe(
    resposta => {
      // 直接拿到目标数组第0项的enviado
      const enviadoValor = resposta.目标数组[0].enviado;
      console.log(enviadoValor); // 这里就能正确获取了

      // 提取表格要用的数组，初始化数据源
      const tabelaDados = resposta.主数组;
      this.acordos = new MatTableDataSource(tabelaDados);
      this.acordos.paginator = this.paginator;
      this.acordosOriginais = new MatTableDataSource(tabelaDados);
      this.acordosOriginais.paginator = this.paginator;

      // 如果要把目标数组的第0项加到表格开头
      const novoDados = [...tabelaDados];
      novoDados.unshift(resposta.目标数组[0]);
      this.acordos.data = novoDados;
    }
  );
}

注意：把代码里的主数组、目标数组换成服务返回对象里实际的数组键名（比如你截图里显示的键名）。

第二步：模板里正常访问属性 #

当数据源data是数组后，模板里的row就是数组里的单个对象，row.enviado就能正常用了：

<table mat-table class="mat-elevation-z8" [dataSource]="acordos" class="table">
  <ng-container matColumnDef="acoes">
    <th mat-header-cell *matHeaderCellDef> AÇÕES </th>
    <td mat-cell *matCellDef="let row">
      <button mat-icon-button (click)="fileInput.click()" 
              *ngIf="row.enviado !== 2 && row.enviado !== 0"
              matTooltip="Enviar documento">
          <mat-icon>upload</mat-icon> 
      </button>
    </td>
  </ng-container>
  <!-- 其他列的定义请补充完整 -->
</table>

重点提醒 #

• 一定要确认服务返回的对象结构，搞清楚两个数组的键名是什么，别写错。
• 绝对不能把非数组的对象直接赋值给MatTableDataSource的data，不然表格渲染和属性访问都会出问题。

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