Question

我的问题是我无法在屏幕上呈现某些属性的JSON值。

我正在使用 Angular Material 表来呈现我的JSON响应。

下面的代码在屏幕上呈现JSON

 <mat-card-content class="dashboard-card-content">
    <div></div>
    <div *ngIf="card.title===title1" class="custom-table-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSourceGeneralShift" class="">

        <!-- Name Column -->
        <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let col" class="align-left"> {{col.Name}} </td>
        </ng-container>

        <!-- day10 Column -->
        <ng-container matColumnDef="day10">
          <th class="table-header" mat-header-cell *matHeaderCellDef> Shift </th>
          <td mat-cell *matCellDef="let col" class="align-left" > {{col | json}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"> </tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"> </tr>
      </table>
    </div>
 </mat-card-content>

在 day10 列中，我使用了{{col | json}}，这只是检查是否从API获取数据！

我的要求是将月份值从 day1 渲染为 day31

JSON返回值包含每月1号的day1，每月2号的day2，以此类推。每个“ day-”属性值都包含不同的值，例如：“ Shift 1”，“ Shift 2”等。

每个JSON响应都不同。例如：

第15天的回复

[
 {
   "Name": "Bravo",
   "day15": "Shift 1"
 }
]

第20天的回复

[
 {
   "Name": "Adam",
   "day20": "Shift 2"
 }
]

**问题：** 由于更改了 key 值（day1，day2，...，day31），如何在Angular Material表模板上呈现它？

Answer 1

基本上只使用Object.keys静态方法来获取响应对象中存在的键数组。如果您确定始终有两个条目，请选择一个非Name的条目：

public getDayVal(data){
  Object.keys(data).forEach((k) => {
    if (k !== 'Name') return data[k];
  })
}

如果不确定，则只需按Regex键即可确定其是否匹配：

public getDayVal(data){
  let re = /^day[0-9]+$/;
  Object.keys(data).forEach((k) => {
    if (re.test(k)) return data[k];
  })
}

然后在模板中使用上面的辅助函数来提取不同的密钥：

<td mat-cell *matCellDef="let col" class="align-left" > {{getDayVal(col)}} </td>

重要我将跳过所有其他操作，但是在您的情况下，将进行必要的健全性检查，例如验证helper方法最终将返回任何内容，如果找不到所需的dayXX键，该怎么办。由您自己决定如何处理，由于undefined从表单助手返回，表现在不会在列中不呈现任何内容。

最重要的是：如果您负责的话，请更改数据模型。在 field 中编码信息只是基本的设计缺陷。像这样：

interface DayIfc {
  Name: string;
  Day: number;
  Shift: number;
}

将解决您所有的问题。

如何在Angular模板中获取JSON属性值或键？呈现JSON值？

1 个答案: