在if指令中使用if指令

Question

我正在使用角度。 我正在動態創建一個表。 所以我用ngFor指令創建。 但是，某些列的類型是日期。 所以，我想鑄造那個。 因此，我想使用if情況。 我在下面寫的像c＃razor語法。 但是，我該怎么做呢？

<tr [pSelectableRow]="rowData">
  <td *ngFor="let col of columns">
    if(col.type == "Date")  ???????????
       {{rowData[col.field] | date:'dd/MM/yyyy'}}
    else   ???????????????
        {{rowData[col.field] }}
  </td>
</tr>

Answer 1

<tr [pSelectableRow]="rowData">
  <td *ngFor="let col of columns">
    <ng-container *ngIf="(rowData[col.type] == 'Date'); else defaultTemplate;">
       <span>{{rowData[col.field] | date:'dd/MM/yyyy'}}</span>
    </ng-container>
    <ng-template #defaultTemplate>
        <span>{{rowData[col.field] }}</span>
    </ng-template>
  </td>
</tr>

Answer 2

你能檢查一下嗎？

 <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
        <div  *ngIf = "rowData[col.type] == "'Date'" >
           {{rowData[col.field] | date:'dd/MM/yyyy'}}
        </div>
        <div  *ngIf = "rowData[col.type] != "'Date'" >
            {{rowData[col.field] }}
      </div>
    </td>
    </tr>

Answer 3

看一下這個

 data = [ {"name":"row1", "type": "date", "value": "Wed Oct 10 2018"}, {"name":"row2", "type": "email", "value": "test@test.com"}, {"name":"row3", "type": "date", "value": "Wed Oct 10 2018"}, {"name":"row4", "type": "phone", "value": "+919876543210"} ]; 

 <tr *ngFor="let row of data"> <td>{{row.name}}</td> <td>{{row.type}}</td> <td>{{row.type=='date' ? (row.value | date:'dd/MM/yyy') : (row.value)}}</td> </tr> 

Answer 4

我通過@NIVINCEN的答案幫助找到了解決方案。 如果為， 則解為三元 。 通過使用三元if，您只能使用一行代碼，而無需使用任何span，div或ng-template。

<tr [pSelectableRow]="rowData">
  <td *ngFor="let col of columns">
    {{ col.type =='Date' ? (rowData[col.field] | date:'dd/MM/yyyy') : rowData[col.field]}}
  </td>
</tr>