Angular2延迟更新视图

发布时间：2020-12-17 18:05:15 所属栏目：安全来源：网络整理

导读：我注意到使用Angular 2的组件有一种奇怪的行为. 一旦我的组件更改作为我的提供者包含的模型,我的视图需要几秒钟才能更新.即使来自API的数据是单个数据. 例如：我有一个名为UserModel的模型作为我的提供者在我的组件内部,我从API获取数据,然后更新此模型,这

我注意到使用Angular 2的组件有一种奇怪的行为.
一旦我的组件更改作为我的提供者包含的模型,我的视图需要几秒钟才能更新.即使来自API的数据是单个数据.

例如：

我有一个名为UserModel的模型作为我的提供者
在我的组件内部,我从API获取数据,然后更新此模型,这也在我的视图中.
从服务器获得响应之后,更新我的视图仍然需要几秒钟,有时它不会更新,就在我单击同一页面上的任何文本控制器之后,然后在任何文本获得焦点后更新我的视图.

有没有人见过这个？我能做错什么？

卡组件

public createCard(model:CardModel):Promise<any>{
    var context = this;
    return new Promise((resolve,reject) => {
    this.stripe.createToken(model)
        .then(function(token){
            model.token = token;
            context.saveCard("./card",model,true)
                    .then(data => resolve(data))
                    .catch(error => reject(error));
        })
        .catch(error => reject(error));
});

条纹服务

public createToken(model:CardModel):Promise<any>{
    //I get callback and convert return it as promise
    return new Promise((resolve,reject) => {
            //this function is the one from stripe.js,it is not promise
            this.stripe.card.createToken(model,function(status,response){
            if(status == 200){
                resolve(response.id);
            }else{
                reject(response.error.message);
            }
        });
    });
}

如果您注意到函数createToken返回为回调,因为它是一个Strip.js函数,然后我将其转换为Promise以将其返回到createCard.但是一旦完成所有功能,我的区域就不会改变.如果我删除this.stripe.card.createToken并使用超时返回一个简单的resolve(),它可以正常工作.所以我认为问题是什么时候有异步函数在Promise中返回回调.但我不知道如何处理它.

解决方法

看起来你使用的第三方库与Angular 2不兼容.我和StripeJS有同样的问题.这个问题与Angular的Zone.js和Lifecycle有关 – 它与Angular 1中糟糕的摘要周期问题非常相似.Angular在此有详细的解决方案文档： https://angular.io/api/core/ChangeDetectorRef#example-live-demo

为了解决这个问题,您必须实现自己的生命周期循环并将第三方库添加到更改检测中.
我对StripeJS的实现(还记得用clearInterval销毁setInterval：

import {
  Component,Input,Output,EventEmitter,AfterContentInit,ChangeDetectorRef,ChangeDetectionStrategy,ViewContainerRef,OnDestroy
} from '@angular/core';

@Component({
  selector: 'v-payment-form',// <payment-form></payment-form>
  changeDetection: ChangeDetectionStrategy.OnPush,templateUrl: './payment-form.component.html'
})
export class PaymentFormComponent implements AfterContentInit,OnDestroy {
  checker: any;
  constructor(private changeDetectorRef: ChangeDetectorRef) {
    this.checker = setInterval(() => {
      // the following is required,otherwise the view will not be updated
      this.changeDetectorRef.markForCheck();
    },75);
  }
  addPaymentMethod() {
    Stripe.card.createToken(cardDetails)
    this.changeDetectorRef.detectChanges()
  }
  ngAfterContentInit() {
    // ..load stripe js here - I use scriptjs 
  }
  ngOnDestroy(): void {
    clearInterval(this.checker)
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!