Question

从模板调用组件中的函数而不触发事件的最佳方法是什么？我做了如下所示的操作，但是可以反复调用该函数。

 <div class="row f-pt9" id="row1" *ngFor="let item of cart.items">
   {{setProduct(item.productId)}}
</div>

Answer 1

发生这种情况是因为默认情况下，每个组件上的ChangeDetection策略都设置为Default。无论发生什么情况，应用程序中发生的任何事件（timers，Observable，event等）都将导致要运行的更改检测，最终归结为更新每个绑定评估。这就是您可以在setProduct方法上看到多个调用的原因。

一旦在组件内收到setProduct集合，就可以调用cart.items方法。

getCartItems() {
    this.cartItemService.getCart().subscribe(cart =>
      this.cart = cart
      this.cart.items.forEach(item => {
         item.product = this.setProduct(item.productId)
      })
    )
}

然后直接在用户界面上使用{{item.product}}

另一种方式可能是使用ngForTrackBy可以很容易地应用在*ngFor上，以使唯一的事物传递给函数，并根据特定的值变化*ngFor决定是否更新模板。

*ngFor="let item of cart.items;trackBy: item?.id"

Answer 2

Component.html

 <div class="row f-pt9" id="row1" *ngFor="let item of cart.items" #product>
    </div>

Component.ts

@ViewChild('product') product: ElementRef;

ngOnInit(){

this.myfunction(this.product)
}

private myfunction(product:any):void{

  console.log('product',product);
}

您可以使用的是角度生命周期挂钩这样的内容，如果您想在组件初始化后立即执行某些功能，否则如果它必须对html属性进行更改，则可以使用{{1} }而不是ngOnChanges()，我也使用了template变量，该变量可以在组件上访问

如何在没有触发事件的情况下从Angular模板调用函数？

2 个答案: