在 Angular 中，ngIf 和 ngFor 是两个最常用的指令。它们分别用于条件渲染和循环渲染。下面我们来详细介绍它们的使用。
ngIf
ngIf 指令用于根据条件来呈现或隐藏一个 DOM 元素。它的语法如下：
<div *ngIf="condition">Content to render when condition is true.</div>
其中，condition 是一个表达式，当它的值为 true 时，该元素会被呈现出来，否则就会被隐藏。需要注意的是，ngIf 指令会根据条件来添加或移除元素，因此它会影响 DOM 结构，可能会导致性能问题。
除了基本的条件渲染外，ngIf 还支持 else 和 then 语法。它们可以用来在条件不满足时呈现备选内容。示例如下：
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div> <ng-template #elseBlock>Content to render when condition is false.</ng-template>
ngFor
ngFor 指令用于循环渲染一个数组或对象的内容。它的语法如下：
<div *ngFor="let item of items">Content to render for each item.</div>
其中，items 是一个数组或对象，item 是当前循环的元素。ngFor 指令会根据数组或对象的长度来循环渲染内容，并且可以使用 index 变量来获取当前元素的索引。
ngFor 指令还支持多种语法，例如使用 trackBy 来提高性能，使用 ngForOf 来遍历 Map、Set 等数据类型。示例如下：
<div *ngFor="let item of items; index as i; trackBy: trackByFn">Content to render for each item.</div> <ng-container *ngFor="let item of map | keyvalue">Content to render for each key-value pair.</ng-container>
总结
ngIf 和 ngFor 是 Angular 中两个最常用的指令，它们分别用于条件渲染和循环渲染。在使用时需要注意性能问题，并且可以根据需要使用 else 和 then、trackBy、ngForOf 等语法来扩展它们的功能。希望本文能够对大家理解和使用 ngIf 和 ngFor 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655201fdd2f5e1655dbbe6ae