从可观察的数据返回后，角度视图未更新

Question

在AngularJS 1.6 应用程序中，在组件内部，我调用一个可观察对象的订阅，一旦接收到数据，我就初始化一个要在模板中使用的对象。模板是一个简单的表格。

对后端 API 的调用和本地对象的初始化都正确完成，我可以检查日志。但是，当数据可用时，视图不会自行刷新。

只有当我在模板上单击鼠标时，视图才能正确反映数据。

模板

<table class="table light-gray table-no-borders table-condensed">
 <tr>
    <td>
        <span>{{maCtrl.userDetails.lastname}}</span>
    </td>
    <td>
        <span>{{maCtrl.userDetails.firstname}}</span>
    </td>
  </tr>
 <tr>
    ....
 </tr>
</table>

控制器

export class MADetailsController {

public uid: string;
public userDetails: MADetails;

constructor(private currentUserService: IUserService, private maService: MAService) { }

$onInit() {
    if (this.uid) {
        this.currentUserService.getCurrentUser()
            .subscribe(u => {
                this.maService.getPersonDetailsFromSnapshotByUId(this.uid)
                    .then((res: QueryResult<any>) => {

                        let employee = res.data;
                        this.userDetails = new MADetails();

                        this.userDetails.firstname = employee.firstname;
                        this.userDetails.lastname = employee.lastname;

                        //Further initialization...

                    })
            })
    }
  }
}

组件

export class MaDetailsComponent{
static get instance(): IComponentOptions {
    return {
        bindings: {
            uid: "<",
        },
        templateUrl: "./details.html",
        controller: MADetailsController,
        controllerAs: "maCtrl"
    };
  }

}

Answer 1

看起来 Angular 不知道数据更改。我不确定 RxJS 是否会触发摘要循环

只有当我在模板上单击鼠标时，视图才会反映 数据正确。

通过点击您触发了摘要循环，这就是它起作用的原因。

您可以通过使用$timeout 包装数据来调用摘要循环：

$timeout(() => {       
    let employee = res.data;
    this.userDetails = new MADetails();

    this.userDetails.firstname = employee.firstname;
    this.userDetails.lastname = employee.lastname;
}, 0);

---

希望对你有帮助