Question

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

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

如果Array＆＃34;子部门＆＃34;看起来像这样：

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

按预期添加3＆＃34; app-sector＆＃34; -Components。那些＆＃34; app-sector＆＃34; -Components正被添加到＆＃34; app-sector＆＃34; -Component中。父母通过＆＃34; @输入＆＃34;从父母那里得到他的子部门。在我的＆＃34; app-component＆＃34;。

这就是HTML-Structure的样子：

<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。我添加了一个trackBy过滤器，它返回了＆＃34; id＆＃34;财产，但它没有改变任何东西。方法如下：

<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);
    }
}

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

亲切的问候。

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>，这使我假设您已在ng-content的模板中使用了app-sector somwhere。

过去*ngFor和ng-content我的结果出现了类似的意外结果。

在搜索主题时，我经常遇到this answer。

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

这不能解释为什么你的初始数据显示3次，但它只是我的两分钱。希望它可以提供帮助。

Answer 2

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

Angular 2 * ngFor处理更新错误

2 个答案: