如何将multi ngif应用于table上的数据显示？

Question

如何将 multi *ngIf 应用于返回到 table 的数据？

我需要根据多条件 *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 个应用程序我显示的动态数据没有固定 header 或内容

 <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 data

ReportId   onlineurl          reportdate
1222       localhost:5000/    12-12-2018
1222       localhost:7000/    12-01-2019
1222       localhost:9000/    12-12-2020
control report
reportid  fieldname   columntype
1222       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>

如何将multi ngif应用于table上的数据显示？

How to apply multi ngif to data display on table?

javascript

typescript

angularjs-directive

angular-components

angular7