Angular 5 嵌套 *ngFor-Loop 与块

Question

我对 Angular 很陌生，并试图将嵌套的 For-Loop 作为块获取。

<div *ngFor="let eventChunks of chunks(events,3);">
      <div *ngFor="let event of eventChunks" class="card-columns">
        <event-item [event]="event"></event-item>
      </div>

在我的组件中，我将函数 chunks() 定义如下：

chunks(array, size) {
        let results = [];
        results = [];
        while (array.length) {
            results.push(array.splice(0, size));
        }
        return results;
    };

最终出现以下错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'. Current value: 'ngForOf: '.

有谁知道如何正确解决这个问题？我尝试使用 TrackBy 和 index，但找不到有效的解决方案。

非常感谢您的宝贵时间和帮助！ :)

Answer 1

调用函数来操作数据从来都不是一个好主意 模板端

错误是因为从模板端调用 function 导致 ngFor 和模板重新渲染（并再次导致循环），

在模板端而不是：

<div *ngFor="let eventChunks of chunks(events,3);">

随便用

<div *ngFor="let eventChunks of events">

和从组件端：

使用构造函数/ngOnInit 放置此代码（或在您的服务中获取数据）

this.events = this.chunks(this.events,3);

WORKING DEMO（更多详情Read）