我的角度非常基本。我有一个视图,我在哪里显示一个对象(在服务中):
<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中工作。似乎网上的所有其他例子也被打破了:
答案 0 :(得分:1)
为什么不使用箭头功能而忘记这个hack let component = this
?也许这可能是问题所在。使用ES6功能,请遵循角度样式指南。
public addGroup(group: Group) {
this.api.postWrapper('groups', group).then( (data: Group) => {
this.pushNewGroup(data);
});
}
答案 1 :(得分:0)
Promise会将更改检测推迟到下一个检测周期。
试试这个:
在构造函数中添加private _cdr: ChangeDetectorRef
。(显然导入ChangeDetectorRef
)
在承诺内添加this._cdr.detectChanges()
(最后)。