我的角度很基本。我有一个显示对象(在服务中)的视图:
<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 中使用有角度的材料。似乎网络上的所有其他示例也都被破坏了: