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">
        <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 2

检查一下

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 3

我通过@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>

在if指令中使用if指令

4 个答案: