angular - ngFor , trackby - Powered by Discuz! Archiver

国家大事 發表於 2019-12-4 11:45:00

angular - ngFor, trackby

ngFor
ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令。该指令放置在元素上，该元素将成为克隆模板的父级。
<div class="cnblogs_code">
<pre><li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li></pre>
</div>
一般使用是：
<div class="cnblogs_code">
<pre>const list = [{age: '16'}, {age: '18'}, {age: '15'}]

<li *ngFor="let item of list; index as i>{{item.age}}</li>
// 或者
<li *ngFor="let item of list; let i = index">{{item.age}}</li></pre>
</div>
<h3>使用trackBy提高性能</h3>
<pre>trackBy: trackByFn 定义如何跟踪iterable中项的更改的函数。</pre>
在iterable中添加、移动或移除项时，指令必须重新呈现适当的DOM节点。为了最小化DOM中的搅动，只重新呈现已更改的节点。
默认情况下，更改检测器假定对象实例标识iterable中的节点。提供此函数时，指令使用调用此函数的结果来标识项节点，而不是对象本身的标识。
函数接收两个输入，迭代索引和节点对象ID。
要想自定义默认的跟踪算法，<code>NgForOf</code> 支持 <code>trackBy</code> 选项。 <code>trackBy</code> 接受一个带两个参数（<code>index</code> 和 <code>item</code>）的函数。
如果给出了 <code>trackBy</code>，Angular 就会使用该函数的返回值来跟踪变化。
<div class="cnblogs_code">
<pre>@Component({
selector: 'my-app',
template: `
<ul>
 <li *ngFor="let item of list;">{{item.age}}</li>
 <li *ngFor="let item of list;trackBy: trackByFn">{{item.age}}</li>
</ul>
<button (click)="getItems()">Refresh items</button>
`,
})
export class App {
　　list = [{age: '16'}, {age: '18'}, {age: '15'}];

　　constructor() {
　　　　this.list= [{age: '16'}, {age: '18'}, {age: '15'}]
　　}

　　getItems() {
　　　　this.list= [{age: '16'}, {age: '18'}, {age: '15'}, {age: '80'}]
　　}

　　trackByFn(index, item) {
　　　　return item.age; // or index
　　}
} </pre>
</div>
列表发生变化是，如果没有添加 trackBy ，那么与数据关联度的所有DOM元素会重新渲染；
如果使用trackBy ：更改列表时，Angular可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。
<h3 id="局部变量">局部变量</h3>
<div class="cnblogs_code">
<pre>const list = [{age: '16'}, {age: '18'}, {age: '15'}];
<li *ngFor="let item of list; first as isFirst">{{item.age}} 岁 </li>
/*
　　16岁
　　18
　　15
*/</pre>
</div>
<code>NgForOf</code> 导出了一系列值，可以指定别名后作为局部变量使用：
<ul>
<li>
<code>$implicit: T</code>：迭代目标（绑定到<code>ngForOf</code>）中每个条目的值。
</li>
<li>
<code>ngForOf: NgIterable<T></code>：迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 <code>async</code> 管道时（<code>userStreams | async</code>）。
</li>
<li>
<code>index: number</code>：可迭代对象中当前条目的索引。
</li>
<li>
<code>first: boolean</code>：如果当前条目是可迭代对象中的第一个条目则为 <code>true</code>。
</li>
<li>
<code>last: boolean</code>：如果当前条目是可迭代对象中的最后一个条目则为 <code>true</code>。
</li>
<li>
<code>even: boolean</code>：如果当前条目在可迭代对象中的索引号为偶数则为 <code>true</code>。
</li>
<li>
<code>odd: boolean</code>：如果当前条目在可迭代对象中的索引号为奇数则为 <code>true</code>。
</li>
</ul>
 
  
来源：https://www.cnblogs.com/lvsk/p/11981964.html

頁: [1]

琼殿技术论坛's Archiver

angular - ngFor, trackby