ngFor中ngIf的Angular 2显示问题

ngFor和ngIf是Angular框架中常用的指令，用于在模板中进行循环和条件判断。

ngFor是Angular中的循环指令，用于遍历一个集合并生成相应的HTML元素。它的语法如下：

<element *ngFor="let item of items; let i = index">
  {{ item }}
</element>

其中，items是一个数组或可迭代对象，item是当前遍历的元素，i是当前元素的索引。通过ngFor指令，我们可以根据集合的长度动态生成多个元素。

ngIf是Angular中的条件指令，用于根据条件判断是否显示某个HTML元素。它的语法如下：

<element *ngIf="condition">
  Content to show when condition is true.
</element>

其中，condition是一个布尔表达式，当其为true时，元素会被显示；当其为false时，元素会被隐藏或移除。

在使用ngFor和ngIf时，需要注意它们的顺序。由于ngFor会生成多个元素，如果将ngIf放在ngFor的父元素上，会导致条件判断应用于整个ngFor循环，而不是单个元素。为了在ngFor循环内部应用条件判断，需要将ngIf放在ngFor生成的元素上。

下面是一个示例，展示了如何在ngFor中使用ngIf：

<ng-container *ngFor="let item of items">
  <div *ngIf="item.visible">
    {{ item.name }}
  </div>
</ng-container>

在上述示例中，ngFor遍历了一个名为items的数组，根据数组中每个元素的visible属性决定是否显示对应的div元素。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：提供可扩展的计算容量，满足不同规模业务的需求。产品介绍链接
• 云数据库 MySQL 版（CDB）：高可用、可扩展的关系型数据库服务。产品介绍链接
• 腾讯云对象存储（COS）：安全、稳定、高扩展性的云端存储服务。产品介绍链接
• 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
• 腾讯云物联网平台（IoT Hub）：连接、管理和控制物联网设备的云服务。产品介绍链接
• 腾讯云移动开发平台（MTP）：提供一站式移动应用开发、测试、分发和运营的云服务。产品介绍链接

以上是对ngFor中ngIf的Angular 2显示问题的完善且全面的答案。