html - 如何在 typescript 中打破 ngFor 循环

Question

我正在使用 Ionic-3 开发混合应用程序。我正在尝试从 Html 调用函数并使用此函数从 typescript 获取一些返回值，但我看到该函数被多次调用并且我的浏览器和应用程序挂起。我的 html 和 typescript 函数如下。

HTML

  <div *ngFor="let product of myCourier">
    <ion-row>
      <ion-col col-6> Charge</ion-col>
      <ion-col col-6>Rs. {{getcharge(product)}}</ion-col>
    </ion-row>
  </div>

Typescript

   getcharge(item){
    var dat: { [k: string]: any } = {};
    dat.toaddress = item.to_address
    dat.fromaddress = item.from_address
    this.httpClient.post(this.config.url + 'getrate.php', dat).subscribe((data: any) => {
      if (data.ResponseCode == 1) {
        var charge = data.charge
        console.log(charge)
        return charge
      }
    });
  }

Answer 1

作为最佳实践，您不应在 View 中添加逻辑。

对于你的情况，你应该为这样的事情重写你的:

Your HTML (No function call, just product)

<div *ngFor="let product of myCourierProducts">
  <ion-row>
    <ion-col col-6> Charge</ion-col>
    <ion-col col-6>Rs. {{product}}</ion-col>
  </ion-row>
</div>

Your TS

ngOnInit() { // Or wherever you set your myCourier variable
    for (i=0; i<5; i++) {
        myCourier[i] = SOMETHING
        myCourierProducts[i] = getcharge(SOMETHING)
    }
}

getcharge(item){
    var dat: { [k: string]: any } = {};
    dat.toaddress = item.to_address
    dat.fromaddress = item.from_address
    this.httpClient.post(this.config.url + 'getrate.php', dat).subscribe((data: any) => {
        if (data.ResponseCode == 1) {
            var charge = data.charge
            console.log(charge)
            return charge
        }
    });
}

重要的是要提到 MVVM Angular architecture 中的 组件(“模型”)不适用于复杂的逻辑，它适用于指向 View 的小逻辑。

复杂的逻辑应该放在services中。

https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/