Question

我有一个应用程序，其中ProductComponent作为列表重复多次。在此ProductComponent中，有一个名为boolean的公共this.showPriceLoadingText局部变量。但是，在实例中更新此变量时，列表中的所有其他实例都会更新。我认为es6封装了它所在的实例/范围内的变量，显然不是。

我怎样才能使这个变量独立运行？

class ProductComponent(){

 public showBasketLoadingText: boolean;
 public addingToBasketText: string = "";

 constructor() {
    this.showBasketLoadingText = false;
    this.addingToBasketText = environment.configurations.uiConfig.addingToBasketText;
 }

QuickAddtoCart(product: Product) {

    this.showBasketLoadingText = true;

    //DO STUFF

    let _self = this;
    setTimeout(function(){
        _self.showBasketLoadingText = false;
    }, 1000);
  }

}

HTML：

<span *ngIf="(!this.showBasketLoadingText)"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> Add to basket</span>
<span *ngIf="(this.showBasketLoadingText)">{{ addingToBasketText }}</span>

Answer 1

您应该使用这种方式（箭头符号）来保留this：

setTimeout(() => {this.showBasketLoadingText = false;}, 1000);

more info here

箭头功能没有自己的功能;这个值使用封闭执行上下文。

Answer 2

我现在已经解决了......我发现该组件实际上只是一个产品列表而不是单个产品。道歉浪费你的时间

在Angular 4中封装每个实例的变量

2 个答案: