ngIf 和 ng-template的结合使用

310 阅读1分钟

// 格式

    <!-- 通过ngIf结构型指令显示ng-template的内容 -->
    <div class="lessons-list" *ngIf="condition else elseTemplate">
        判断条件为真
    </div>
    <ng-template #elseTemplate>
        <div>判断条件为假</div>
    </ng-template>

情景1:普通用法

<input *ngIf="!deviceScore[item.code] && (item.code == 'run_stable'else temP"  
    type="numbernz-input [(ngModel)]="deviceScore[item.code]['score']" />  

<ng-template #temP>  
    <div>这是模板内容</div>  
</ng-template>

情景2:一个元素中既可以显示 一个字符串变量,也可以显示一个模板

<span class="ant-alert-message" *ngIf="nzMessage">
    <ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }} + 123</ng-container>
    <ng-template #messageTemplate>
        <ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
    </ng-template>
 </span>
 <ng-template #messag>
 这是一个模板
 </ng-template>