0

我的角度很基本。我有一个显示对象（在服务中）的视图：

<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/

4

2 回答 2

1

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

public addGroup(group: Group) {
  this.api.postWrapper('groups', group).then( (data: Group) => {
     this.pushNewGroup(data);
  });
}
于 2018-06-06T15:29:26.577 回答
0

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

尝试这个：

添加private _cdr: ChangeDetectorRef构造函数。（显然是 import ChangeDetectorRef）

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

于 2018-06-06T15:27:54.850 回答