如何将多ngif应用于表格上的数据显示？

Question

如何将多 *ngIf 应用于返回到表的数据？我需要根据多条件*ngIf控制列名，但我不知道使用了哪个标签以及在哪里：*ngIf="coln=repcon.fieldName && repcon.columnType=1" then display data as icon link on field onlineurl*ngIf="coln=repcon.fieldName && repcon.columnType=2" then make it as hidden field to field onlineurl我在angular 7应用程序上工作，我显示动态数据没有固定的标题或内容 <thead >                  <tr>                    <th  *ngFor="let coln of headerCols">                        {{coln}}                    </th>                  </tr>                </thead> <tbody>                  <ng-container *ngFor="let repcon of ReportControl">                  <ng-container *ngFor="let repdata of ReportData">                    <tr *ngFor="let rep of reportdetailslist">                      <td *ngFor="let coln of headerCols">                        <span>{{rep[coln]}}</span>                   // i think here can applied multi ng if but which tag used .                        </td>                    </tr>                  </ng-container>                </ng-container>                </tbody>sample dataReportId   onlineurl          reportdate1222       localhost:5000/    12-12-20181222       localhost:7000/    12-01-20191222       localhost:9000/    12-12-2020control reportreportid  fieldname   columntype1222       onlineurl     1

Answer 1

根据您的条件，您可以嵌套 *ngIf ：

<td *ngFor="let coln of headerCols">

    <div *ngIf="coln=repcon.fieldName">

        <div *ngIf="repcon.columnType=1">data as icon link</div>

        <div *ngIf="repcon.columnType=2">hidden field</div>

    </div>

</td>

或者用 *ngSwitch ：

<td *ngFor="let coln of headerCols">

    <div *ngIf="coln=repcon.fieldName" [ngSwitch]="repcon.fieldName">

        <div *ngSwitchCase="1">data as icon link</div>

        <div *ngSwitchCase="2">hidden field</div>

    </div>

</td>