在if指令中使用if指令

Question

I'm using angular. I'm creating a table dynamically. So I'm creating with ngFor directive. But, type of some columns are Date. So, I want casting that. So, I want to use if case. I wrote below like c# razor syntax. But, how can I do in angular?

<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

Can you check this?

 <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

Check this out

 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

I found the solution by @NIVINCEN's answer help. The solution is ternary if . By using ternary if, you can do with only one row code and without using any span, div or 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>