角2:视图不更新函数时调用的承诺
角2:视图不更新函数时调用的承诺
提问于 2018-06-06 15:18:56
我的角度很基本。我有一个视图，在其中显示一个对象(在服务中)：
<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: []
})对于我的add组对话框，它是：
@Component({
selector: 'addGroup',
templateUrl: './AddGroupComponent.html',
styleUrls: ['./AddGroupComponent.scss'],
providers: [ApiService, PermissionsService, Service],
changeDetection: ChangeDetectionStrategy.Default
})编辑:很难把整个东西提取成柱塞，但是我试着重新创建它，结果发现承诺是有效的。我认为这可能是MatDialog的错。它不更新主视图。我试着用柱塞重新制造整个东西，但是我不能让棱角材料在柱塞中工作。网络上的其他例子似乎也被打破了：
回答 2
Stack Overflow用户
发布于 2018-06-06 15:29:26
为什么不使用箭头函数并忘记这个黑客let component = this呢？也许这就是问题所在。使用ES6特性，遵循角度样式指南。
public addGroup(group: Group) {
this.api.postWrapper('groups', group).then( (data: Group) => {
this.pushNewGroup(data);
});
}Stack Overflow用户
发布于 2018-06-06 15:27:54
承诺将把变更检测推迟到下一个检测周期。
尝试如下：
在构造函数中添加private _cdr: ChangeDetectorRef。(显然导入ChangeDetectorRef)
添加this._cdr.detectChanges()内部承诺(在结尾)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50723991
复制相关文章
相似问题
腾讯云开发者
