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

但如果我通过对话窗口调用承诺，那么它不会更新视图：

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

---

编辑：很难将整个东西提取到 plunker 中，但我尝试重新创建它并证明承诺的东西有效。我认为问题可能出在 MatDialog 上。它不会更新主视图。我尝试在 plunker 中重新创建整个东西，但我无法在 plunker 中使用有角度的材料。似乎网上所有其他的例子也被打破了：

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

Answer 1

你为什么不使用箭头函数而忘记这个 hack let component = this？也许这可能是问题所在。使用 ES6 特性，遵循 Angular 风格指南。

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

Answer 2

Promise 会将变更检测推迟到下一个检测周期。

试试这个：

在构造函数中添加private _cdr: ChangeDetectorRef。（显然是导入ChangeDetectorRef）

在 promise 中添加this._cdr.detectChanges()（在末尾）。