angular - Angular 2: 関数が promise から呼び出されたときにビューが更新されない

Question

私の角度はかなり基本的です。オブジェクト (サービス内) を表示するビューがあります。

<div *ngFor="let group of service.groups">
    {{group.id}} - {{group.name}}
</div>

私のサービスの単純なバージョンは次のようになります。

public pushNewGroup(group) {

    this.groups.push(group);
    console.log('Pushing new group!');

    // this.zone.run(() => {
    //     this.groups.push(group);
    // });

}

public addGroup(group: Group) {
    let component = this;
    this.api.postWrapper('groups', group).then(function (data: Group) {
        component.pushNewGroup(data);
    });
}

サービスを呼び出すボタンを作成すると、すべてが機能し、ビューが更新されます。

<input type="button" (click)="pushGroup()" value="Add group/>

ビューコンポーネントでのサービス呼び出し:

pushGroup() {
    let group = { ... }
    this.service.pushNewGroup(group);
}

しかし、ダイアログ ウィンドウから promise を呼び出すと、ビューが更新されません。

<li (click)="addGroup()" ><a>Add Group</a></li>

コンポーネント (簡略化):

addGroup() {
    let dialogRef = this.dialog.open(AddGroupComponent, {
        data: {
            ...
        },
    });
}

export class AddGroupComponent {

    constructor(private service: service) {}

    addGroup(group: Group) {
        this.service.addGroup(group);
    }
}

ngZone と ChangeDetectionStrategy.Default の両方を試しました。どちらのソリューションもうまくいきませんでした。オブジェクトが両方の時間で変更され、コンソール ログも機能していることがわかります。しかし、ビューは更新されません。

---

私の @Componment には興味深いものがありません。クラス全体の場合は次のとおりです。

@Component({
    templateUrl: './mainComponent.html',
    styleUrls: ['./mainComponent.scss'],
    providers: []
})

そして、私のグループ追加ダイアログの場合は次のとおりです。

@Component({
    selector: 'addGroup',
    templateUrl: './AddGroupComponent.html',
    styleUrls: ['./AddGroupComponent.scss'],
    providers: [ApiService, PermissionsService, Service],
    changeDetection: ChangeDetectionStrategy.Default
})

---

編集:すべてをプランカーに抽出するのは非常に難しいですが、私はそれを再作成しようとしましたが、約束が機能することがわかりました. 障害は MatDialog にあると思います。メイン ビューは更新されません。プランカーで全体を再作成しようとしましたが、プランカーで角度のあるマテリアルが機能しません。そして、ネット上の他のすべての例も同様に壊れているようです:

https://embed.plnkr.co/LTAEwV6bNvoGQAFoky60/