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

编辑：将整个事物提取到plunker中是非常困难的，但我尝试重新创建它并证明了承诺的作用。我认为可能是MatDialog的错误。它不会更新主视图。我尝试在plunker中重新创建整个东西，但我不能让角质材料在plunker中工作。似乎网上的所有其他例子也被打破了：

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

Answer 1

为什么不使用箭头功能而忘记这个hack let component = this？也许这可能是问题所在。使用ES6功能，请遵循角度样式指南。

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

Answer 2

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

试试这个：

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

在承诺内添加this._cdr.detectChanges()（最后）。

Angular 2：当从promise调用函数时，View不会更新

2 个答案: