Как получить значение свойства JSON или ключ в шаблоне Angular? визуализировать значение JSON?

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 или нет!

Мое требование - преобразовать значения месяца от день1 до день31

возвращаемое значение JSON содержит день1 первого числа каждого месяца, день2 2-го числа каждого месяца и так далее. Каждое значение свойства 'day-' содержит разные значения, например: 'Shift 1', 'Shift 2' и т. Д.

Каждый JSON ответ отличается. EX:

день15 ответ

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

day20 response

[
 {
   "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>

Важно Я пропускаю все дополнительные, но в вашем случае необходимые проверки работоспособности, такие как проверка того, будет ли вспомогательный метод, наконец, что-либо возвращать, и что произойдет, если желаемый ключ dayXX не найден. Вам решать с этим, теперь таблица просто не будет ничего отображать в столбце из-за undefined возвращенного помощника формы.

И самое главное: измените модель данных, если вы за нее отвечаете. Кодирование информации в поле является просто основным недостатком дизайна. Что-то вроде:

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

Решит все ваши проблемы.