Как разорвать цикл ngFor в машинописи

Question

Я разрабатываю гибридное приложение, используя Ionic-3.Я пытаюсь вызвать функцию из Html и получить некоторые значения, возвращаемые из typescript с помощью этой функции, но я вижу, что функция вызывается несколько раз, а мой браузер и приложение зависают.Моя функция html и машинописи приведена ниже.

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>

Машинопись

   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

В качестве передового опыта не следует добавлять логику в представление.

В вашем случае вам следует переписать что-то вроде этого:

Ваш HTML (без функциизвоните, просто 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>

Ваш 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
        }
    });
}

Важно отметить, что component ("Модель")), в архитектуре MVVM Angular не для сложной логики, а для небольшой логики, направленной на представление.

Сложная логика должна быть помещена внутри services.

https://blog.angular -university.io / угловая-2-смарт-компонента-противы-презентации-компонента-Что-разностное-когда в использовании-каждый-и-почему /