Question

我有一个动态JSON，我想用它来显示表格，问题是以下代码行中无法显示带点符号的任何键

.ts代码：

  displayedColumns: string[] = ['_id', 'subdomain', 'domain', 'part_id','info.mimetype','infodependent'];
  dataSource = [];
  public data = [
    {
      "_id": "c9d5ab1a",
      "subdomain": "wing",
      "domain": "aircraft",
      "part_id": "c9d5ab1a",
      "info.mimetype": "application/json",
      "infodependent": "parent"
    },
    {

      "_id": "c1859902",
      "subdomain": "tail",
       "domain": "aircraft",
       "part_id": "c1859902",
       "info.mimetype": "image/jpeg",
       "infodependent": "c9d5ab1a",
    },
    {
      "_id": "1b0b0a26",
      "subdomain": "fuel",
      "domain": "aircraft",
      "part_id": "1b0b0a26",
      "info.mimetype": "image/jpeg",
      "infodependent": "no_parent"
    }
  ]

  constructor(){
    console.log(this.data);
    this.displayedColumns;
    this.dataSource = this.data;
  }

.html代码

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">


        <ng-container matColumnDef="_id">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element"> {{element._id}} </td>
        </ng-container>


        <ng-container matColumnDef="subdomain">
          <th mat-header-cell *matHeaderCellDef>subdomain </th>
          <td mat-cell *matCellDef="let element"> {{element.subdomain}} </td>
        </ng-container>
        <ng-container matColumnDef="domain">
          <th mat-header-cell *matHeaderCellDef>domain </th>
          <td mat-cell *matCellDef="let element"> {{element.domain}} </td>
        </ng-container>


        <ng-container matColumnDef="part_id">
          <th mat-header-cell *matHeaderCellDef> part_id </th>
          <td mat-cell *matCellDef="let element"> {{element.part_id}} </td>
        </ng-container>


        <ng-container matColumnDef="info.mimetype">
          <th mat-header-cell *matHeaderCellDef>info.mimetype </th>
          <td mat-cell *matCellDef="let element"> {{element.info.mimetype}} </td>
        </ng-container>


         <ng-container matColumnDef="infodependent">
          <th mat-header-cell *matHeaderCellDef>info.dependent </th>
          <td mat-cell *matCellDef="let element"> {{element.infodependent}} </td>
        </ng-container>

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


</table>

当前，当我使用上面的代码时，我的表格显示如下

现在我需要澄清两个 1.为什么不使用点符号显示值？ 2.即使其他字段没有点号，为什么它不显示字段？

Answer 1

在查看代码时，您可能会遇到类似于property 'info' does not exist on object 'element'之类的错误。像普通js一样，使用符号或空格。属性名称需要用引号引起来，并使用括号表示法调用。尝试使用{{element['info.mimetype']}}

无法在角物料表中显示行数据

1 个答案: