在Angular / Typescript中的*ngFor内添加一个if else子句

在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）。

• 腾讯云云服务器（CVM）：提供可扩展的计算能力，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云云服务器（CVM）。
• 腾讯云云函数（SCF）：无需管理服务器即可运行代码的事件驱动计算服务。了解更多信息，请访问腾讯云云函数（SCF）。