如何在 Angular 中实现指令 (ng-template)?
How do I implement directive (ng-template) in Angular?
在我的 HTML 文件中,我复制了“elseBlock2”。我如何实现指令 (ng-template) 来处理它?
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress; else elseBlock2">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</div>
可以这样工作吗?
<div class="col-2">
<ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</ng-container>
<ng-template #elseBlock2>
Your content
</ng-template>
</div>
更新:
如果你想显示 elseBlock 只有当它不在 progress 和 success[=23= 时] 你可以这样做:
<div class="col-2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
<ng-container *ngIf="!item.progress && !item.isSuccess">
Your content
</ng-container>
</div>
你可以使用 if then else 和三元运算符来实现 else-if
in Angular
<ng-container
*ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>
<ng-template #successBlock>
{{ getSimplifiedSize(item.file.size) }}
</ng-template>
<ng-template #progressBlock>
{{ item.progress }}%
</ng-template>
<ng-template #elseBlock>
Error
</ng-template>
在 else 语句中,不传递模板,而是使用三元运算符进行另一个条件检查,并将其他两个模板作为值传递
在我的 HTML 文件中,我复制了“elseBlock2”。我如何实现指令 (ng-template) 来处理它?
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress; else elseBlock2">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</div>
可以这样工作吗?
<div class="col-2">
<ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</ng-container>
<ng-template #elseBlock2>
Your content
</ng-template>
</div>
更新:
如果你想显示 elseBlock 只有当它不在 progress 和 success[=23= 时] 你可以这样做:
<div class="col-2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
<ng-container *ngIf="!item.progress && !item.isSuccess">
Your content
</ng-container>
</div>
你可以使用 if then else 和三元运算符来实现 else-if
in Angular
<ng-container
*ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>
<ng-template #successBlock>
{{ getSimplifiedSize(item.file.size) }}
</ng-template>
<ng-template #progressBlock>
{{ item.progress }}%
</ng-template>
<ng-template #elseBlock>
Error
</ng-template>
在 else 语句中,不传递模板,而是使用三元运算符进行另一个条件检查,并将其他两个模板作为值传递