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和索引，但找不到可行的解决方案。

非常感谢您的时间和帮助！：）

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 ）

带有块的Angular 5嵌套* ngFor-Loop

1 个答案: