• ng-template的使用 -ngFor
  • ng-template的使用 -ngIf

ng-template的使用

原先的

1
2
3
4
5
<tbody>
<tr *ngFor="let element of data; let i = index">
    <td>...<td>
</tr>
</tbody>

想再加一行<tr>,也要拿 data迴圈資料

1
2
3
4
5
6
7
8
<tbody>
<tr *ngFor="let element of data; let i = index">
    <td>...<td>
</tr>
<tr *ngFor="let element of data; let i = index">
    <td>...<td>
</tr>
</tbody>

只要使用 ng-template

1
2
3
4
    <ng-template ngFor let-element [ngForOf]="data" let-i="index">
        <tr>...</tr>
        <tr>...</tr>
    </ng-template>

若有想要 ngFor跟ngIf 同時出現,可寫成

1
2
3
4
5
    <ng-template [ngIf]="!!result">
        <div *ngFor="let ip of result;let i = index">
            {{ip}}
        </div>
    </ng-template>