Question

我有一个Angular应用程序正在向本地API发出http请求，该API返回数据库中的所有项目。在首次加载所有数据后，在将另一个项目添加到数据库并每隔5秒刷新一次数据后，没有任何问题。我能够获取所有数据并将其记录到控制台。 但问题是Html没有更新以反映数据库中新添加的数据。

我在这个问题中读到了类似的问题 Update scope value when service data is changed

但它是角度1，经过研究后我发现$ scope.apply应该使用zone.js来实现。但到目前为止，似乎还没有解决方案。

这是我的构造函数，我最初调用api中的项目

 constructor(
         public Data: ProductService,
         private _http: HttpModule,
         private sanitizer:DomSanitizer,
         private chRef: ChangeDetectorRef,
         private zone: NgZone
       ){

        this.Data.getProducts().subscribe(data => {
                zone.run(() => {
                    this.items.data=data
                    console.log(this.items.data);
                    alert("inside");
                    for(var i=0;i<this.items.data.length;i++)
                    this.items.data[i].picture="http://"+this.items.data[i].picture;
                    this.items.data[i].picture=this.sanitizer.bypassSecurityTrustUrl(this.items.data[i].picture);
                    console.log("latestest");

                });
        });
}

这是我每5秒刷新一次数据的代码

 ngOnInit() {
       this.refreshData();
    }

     private refreshData(): void {
         this.zone.run(() => {
         this.chRef.detectChanges();
        this.postsSubscription = this.Data.getProducts().subscribe(

        data  => {
            this.items.data = data;
            this.subscribeToData();
            console.log(this.items);
        },
        function (error) {
            console.log(error);
        },
        function () {
            console.log("complete");
        }
        );
        });
    }
     private subscribeToData(): void {

        this.timerSubscription = Observable.timer(5000)
            .subscribe(() => this.refreshData());
    }
     public ngOnDestroy(): void {

            if (this.postsSubscription) {
            this.postsSubscription.unsubscribe();
            }
            if (this.timerSubscription) {
            this.timerSubscription.unsubscribe();
            }
    }

Picture of my items not updating because there is already 5 items stored after adding

Picture of the log where it says 5 items

Answer 1

尝试分配更新值

this.items.data = Object.assign({},data)

添加，编辑或删除后Html中的Angular 2数据未更新

1 个答案: