如何在FireBase中更改数据后更新/绑定视图？

我从Firebase获取数据，我期望我的组件视图在数据可用时应该更新，但它需要更多的数据才能更新视图上的数据。以下是我的组件和模板代码。如何在FireBase中更改数据后更新/绑定视图？

在我的情况下，数据可用性和视图绑定之间有一些延迟，为什么？或者如何通知Angular数据得到更新，以便立即更新视图？

@Component({ 
    ... 
}) 
export class BoardComponent implements OnInit { 
    private db: firebase.database.Database; 
    public boards: Array<any>; 


    constructor(private route: ActivatedRoute, 
     private authService: AuthService) { 
     this.db = firebase.database(); 
     this.boards = new Array<any>(); 

    } 


    ngOnInit() { 
     this.loadBoards(); 
    } 

    loadBoards() { 
     var ref = this.db.ref('/boards'); 

     ref.on('child_added', (child) => { 
      console.log("Question added! adding data one by one"); 
      var obj = child.val(); 
      obj.key = child.key; 
      this.boards.push(obj); 
     }); 
    } 
}

模板：

... 

<tr *ngFor="let item of boards"> 
    <td>{{item.name}}</td> 

</tr> 

...

来源

2017-08-06 PARAMANANDA PRADHAN

这可能是因为角度的默认trackBy功能跟踪对象的引用（不会因数组相同而变化，[此答案]（https://stackoverflow.com/a/45311911/6894075）解释了我好吧。 – 0mpurdy

尝试使用'NgZone' - 'ref.on（'child_added'，（child）=> {NgZone.run（（）=> {var obj = child.val（）; ..' –

Thanks，'NgZone'解决了我的问题。 –

您需要使用NgZone因为firebase.database.Database更新发生角区和变化检测之外则不会触发：

constructor(private zone: NgZone, private route: ActivatedRoute, 

loadBoards() { 
    ... 
    ref.on('child_added', (child) => { NgZone.run(()=> {var obj = child.val();..

来源

2017-08-06 15:10:01

如何在FireBase中更改数据后更新/绑定视图？

回答

相关问题