Angular 2 *ngFor 处理更新错误

Question

我有以下问题： 我正在使用这个 *ngFor 循环：

<app-sector *ngFor="let subsector of sector.subsectors" [sector]="subsector"></app-sector>

如果数组“子扇区”如下所示：

var subsectors = [
    {text: 'test', title: 'test', id: 'abc'},
    {text: 'test123', title: 'test123', id: 'def'},
    {text: 'test321', title: 'test321', id: 'ghi'}
]

它按预期添加了 3 个“应用程序扇区”组件。那些“app-sector”-组件被添加到“app-sector”-组件中。父级通过我的“应用程序组件”中的“@Input”从父级获取子扇区。

这就是 HTML 结构的样子：

<app-root>
    <app-sector *ngIf="playlist" [sector]="playlist">
        <app-sector *ngFor="let subsector of sector.subsectors" [sector]="subsector"></app-sector>
    </app-sector>
</app-root>

现在问题从这里开始： 当我像这样更新子部门时：

//Add new subsectors
this.subsectors.push({text: 'Blah', title: 'Blah', id: '123'});
this.subsectors.push({text: 'Blah123', title: 'Blah123', id: '456'});
this.subsectors.push({text: 'Blah321', title: 'Blah321', id: '789'});

//Remove old subsectors
this.subsectors.splice(2, 1);
this.subsectors.splice(1, 1);
this.subsectors.splice(0, 1);

*ngFor 不会创建新的组件，只会破坏一些。我真的看不到模式。它似乎是随机决定是销毁还是创建新组件。

这是我迄今为止尝试过的： 使用跟踪。我添加了一个 trackBy 过滤器，它返回了“id”属性，但它没有改变任何东西。方法如下：

<app-sector *ngFor="let subsector of sector.subsectors; trackBy:identify;" [sector]="subsector"></app-sector>

identify(index,item){
    return item.id;
}

然后我尝试了一些我在研究这个问题时看到的技巧，比如使用切片而不是拼接。或者在父母中我尝试这样做：

ngOnChanges(changes) {
    if(this.sector['subsectors']) {
        setTimeout(() => {
            console.log('spliced subsectores for reinitialization');
            this.sector['subsectors'] = this.sector['subsectors'].slice();
        }, 1000);
    }
}

我希望你能帮助我！如果您需要任何进一步的信息来帮助我，请在 cmets 中询问我 :)

亲切的问候。

Answer 1

这只是我的两分钱，但我觉得这是translcusion引起的问题

---

这是什么意思？

在您的模板中，您具有以下结构：

<app-root>
    <app-sector *ngIf="playlist" [sector]="playlist">
        <app-sector *ngFor="let subsector of sector.subsectors" [sector]="subsector"></app-sector>
    </app-sector>
</app-root>

<app-sector> 在其正文中包含另一个<app-sector>，这让我假设您在app-sector 的模板中使用了ng-content somwhere。

过去，*ngFor 和 ng-content 我也有过类似的意外结果。

我在搜索主题时通常会遇到this answer。

父级传递的子级只能投影一次（无论如何 很多都在那里。如果元素没有选择 使用 select 传递的孩子的特定和不同部分 属性，然后一切都投影到第一个 默认选择器（无）。

这不能解释为什么您的初始数据显示 3 次，但它只是我的两分钱。希望对您有所帮助。

Answer 2

我已经解决了这个问题。我必须在我的@Component({}) 中添加changeDetection: ChangeDetectionStrategy.OnPush。它告诉 Angular2 将任何输入视为不可变的。 - 解决了。