2017-05-05 34 views
0

回来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" 
    }; 
    } 

}

回答

1

看起来像Angular不知道数据更改。林不知道如果RxJS触发摘要周期

只有当我用模板上的鼠标点击视图正确反映 数据。

通过点击你触发的摘要循环,这是它工作的原因。

可以调用只是包裹数据和$timeout消化周期为:

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

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

希望这将有助于

+0

的回答非常感谢。确实现在它显示正确。我认为AngularJS仍然能够“积极倾听”可观察到的变化。 – Francesco

+0

我@Luca希望你能找到RXJS –

+0

一些包装插件会不会'$范围。$ applyAsync(FN)'更合适? –

相关问题