4

假设我有一个显示项目列表的组件

export class ListComponent implements OnInit{

public list:any;

constructor(private _ls: ListService) {}

    ngOnInit() {
            this._ls.listLoad().subscribe((data) => {
                this.list = data['list'];
            });
    }

    loadMore() {
            this._ls.listLoad(this.page).subscribe((data) => {
                this.list = this.list.concat(data['list']);
                this.page++;
            });
    }

}

在模板中我们有

<ul>
    <li *ngFor="let item of list; let index=index">
    {{ item.name}}
    </li>
</ul>
<a (click)="loadMore()">Load more</a>

我想知道，当我们单击“加载更多”链接并从服务器获取新项目并附加到列表时，Angular 2 是重新绘制完整列表还是只是将新项目附加到 DOM 中？

如果它重新绘制完整列表，有没有办法只附加新添加的项目。ChangeDetectionStrategy.OnPush 在这种情况下是否有帮助？

在我的情况下，我最初显示 20 个项目，每次单击 load more 都会将 20 个项目附加到列表中。我希望当用户多次加载更多项目时，他们可能会在列表中列出 1000 到 2000 个项目。如果 Angular 在每次追加时重绘完整列表，可能会导致性能问题。

@ngrx/store 可以带来一些性能优势吗？

4

1 回答 1

1

*ngFor应该只附加新项目，同时保持现有项目不变。如果您在开头或中间插入新项目，则会导致项目被删除并重新添加，而不是仅仅移动，则存在一个已知问题。

于 2016-06-26T19:24:14.567 回答