Angular 2 * 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” – 组件被添加到“app-sector”组件中.父母通过我的“app-component”中的“@Input”从父母那里获取他的子部门.

这就是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过滤器,它返回了“id”属性但它没有改变任何东西.方法如下：

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

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

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

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

我希望你能帮帮我！如果您需要任何进一步的信息,请在评论中询问我:)

亲切的问候.