Angular * ng Для использования PIPE не работает при зацикливании объекта throw - PullRequest
0 голосов
/ 25 мая 2020
API data {
  id: 1,
  date: "21/may/2020",
  name: "Server A",
  geo: "Europa",
  status: "online"
}

 ngOnInit {
   this.col = [
     {field: 'name', header: 'Server Name'},
     {field: 'geo',  header: 'Geography'},
     {field: 'status', header: 'Status'},
     {field: 'date', header: 'Date'}
   ]
}

Я тестирую angular PrimeNG, и у меня есть таблица данных, в которой я устанавливаю значения для каждой строки таблицы вручную, она работает нормально.

шаблон

 <ng-template>
  <td>
    <tr>
      <td>{{rowData.name}}</td>
      <td>{{rowData.geo}}</td>
      <td>{{rowData.status}}</td>
      <td>{{rowData.date | date: 'dd/MMM/yyyy'}}</td>
    </tr>
  <td>
  <ng-template>

Я обновил свой шаблон динамически l oop через объект и установил данные, как мне обновить свой l oop, чтобы я мог вставить канал при визуализации объекта «date».

 <td *ngFor="let col of column">
    {{rowData[col.field]}}
</td>

Вышеупомянутый {{rowData[col.field]}} работает, но я не уверен, как внутри *ngFor="let col of columns " Я могу обновить только col.date и добавить в него канал.

Это то, что я пытался, но безуспешно , baove работает, но не работает Pipe, а также, если я добавляю ключевое значение, данные таблиц больше не отображаются.

<td *ngFor="let col of columns | keyvalue">
  <ng-container *ngIf="rowData[col.field] !== 'date'"> {{rowData[col.field]}}</ng-container>
   <ng-container *ngIf="rowData[col.field] === 'date'"> {{rowData[col.field] | date: 'dd/MMM/yyyy'}}</ng-container>
</td>

Любое предложение или пример, на которые я могу посмотреть?

Ответы [ 2 ]

2 голосов
/ 25 мая 2020

Если я правильно понимаю ваш вопрос, вы хотите применить вертикальную черту в поле даты рождения, чтобы вы могли это сделать,

 <td *ngFor="let data of object">
    {{data["birthdate"] | date: 'dd/MMM/yyyy' }}
</td>
1 голос
/ 25 мая 2020

Используйте вертикальную черту ключевого значения, например

<td *ngFor="let data of object | keyvalue">
  <ng-container *ngIf="data.key !== 'birthdate'"> {{data.value}}</ng-container>
   <ng-container *ngIf="data.key === 'birthdate'"> {{data.value | date: 'dd/MMM/yyyy'}}</ng-container>
</td>
...