在Angular / Typescript中的*ngFor内添加一个if else子句可以通过使用ng-container和ng-template来实现条件渲染。
首先,我们可以使用ng-container来包裹*ngFor指令,并在ng-container内部使用ng-template来定义if和else子句。具体代码如下:
<ng-container *ngFor="let item of items">
<ng-template [ngIf]="item.condition">
<!-- if子句内容 -->
<div>{{ item.name }}</div>
</ng-template>
<ng-template [ngIf]="!item.condition">
<!-- else子句内容 -->
<div>{{ item.name }} (else)</div>
</ng-template>
</ng-container>
在上述代码中,我们使用ng-container来包裹*ngFor指令,并在ng-container内部使用ng-template来定义if和else子句。通过[item.condition]来判断item的条件,如果满足条件则渲染if子句内容,否则渲染else子句内容。
需要注意的是,ng-template并不会直接渲染到DOM中,而是作为一个模板进行条件渲染。因此,我们可以在ng-template内部定义任意的HTML内容,并使用Angular的数据绑定语法来展示数据。
对于上述代码中的items数组,我们可以在组件的Typescript代码中定义并初始化,例如:
items = [
{ name: 'Item 1', condition: true },
{ name: 'Item 2', condition: false },
{ name: 'Item 3', condition: true }
];
这样,根据每个item的condition属性,就可以动态地渲染if和else子句的内容。
在Angular中,ngFor指令用于循环遍历一个集合,并根据集合中的每个元素来渲染相应的HTML内容。通过结合ng-container、ng-template和ngIf指令,我们可以在ngFor内部实现条件渲染,从而根据不同的条件来展示不同的内容。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云