NG Template Syntax的进阶之ngIf、ngFor应用详解

ngIf 和 ngFor：深入理解 Angular 模板语法的关键

Angular 中的模板语法是连接视图与应用程序模型的关键，而 ngIf 和 ngFor 是其中不可或缺的指令。掌握它们的用法可以极大提升开发效率，让代码更具可读性。

ngIf：按需显隐

ngIf 指令根据条件控制元素的显示和隐藏。它接受一个布尔表达式，为 true 时显示元素，为 false 时隐藏。

<div *ngIf="show">
  我被展示出来了！
</div>

<button (click)="show = !show">切换显示</button>

通过单击按钮，可以切换 show 变量的值，从而控制 div 元素的显示和隐藏。

ngFor：遍历数据，逐一呈现

ngFor 指令遍历数据，为每个数据项生成一个元素。它接受一个数组或对象，为数组中的每个元素或对象中的每个键值对生成一个元素。

<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>

在这个例子中，ngFor 指令遍历 items 数组，为数组中的每个元素生成一个 li 元素。li 元素中的插值表达式显示当前元素的值。

扩展功能

获取当前索引： 在 ngFor 循环中，使用 index 变量获取当前项的索引。

<ul>
  <li *ngFor="let item of items; index as i">{{i}}: {{item}}</li>
</ul>

数据过滤： 使用 filter 属性，根据自定义过滤器函数过滤数据。

<ul>
  <li *ngFor="let item of items | filter:filterFunction">{{item}}</li>
</ul>

数据排序： 使用 sort 属性，根据自定义排序函数对数据排序。

<ul>
  <li *ngFor="let item of items | sort:sortFunction">{{item}}</li>
</ul>

结论

ngIf 和 ngFor 是 Angular 模板语法中强大的指令，它们可以灵活控制元素的显示、遍历数据和生成元素。熟练运用它们，将有助于打造功能强大、交互性良好的 Angular 应用程序。

常见问题解答

1. ngIf 和 ngShow 有什么区别？

ngShow 控制元素的可见性（visibility），而 ngIf 控制元素的存在（presence）。使用 ngShow 时，隐藏的元素仍存在于 DOM 中，只是不可见；而使用 ngIf 时，隐藏的元素将从 DOM 中移除。

2. 如何在 ngFor 循环中嵌套另一个 ngFor 循环？

可以使用 ngForNested 指令或管道嵌套 ngFor 循环。ngForNested 指令允许在一个 ngFor 循环中使用另一个 ngFor 循环，而管道允许在模板中嵌套 ngFor 管道。

3. 如何检测 ngFor 循环中的更改？

Angular 中的变化检测机制会自动检测 ngFor 循环中的更改。但是，如果对循环数据进行了手动更改，可以使用 ngDoCheck 生命周期钩子手动触发变化检测。

4. ngFor 可以遍历对象吗？

是的，ngFor 可以遍历对象。它会遍历对象的键值对，并为每个键值对生成一个元素。

5. 如何限制 ngFor 循环中生成元素的数量？

使用 ngForOf 管道，可以限制 ngFor 循环中生成元素的数量。管道语法为：items | slice:start:end，其中 start 和 end 指定生成的元素范围。