Как динамически генерировать разные переменные в Angular? - PullRequest
Новая
       22

Как динамически генерировать разные переменные в Angular?

0 голосов
/ 05 апреля 2020

Я выбираю два флажка, и сумма рассчитывается в Total Claimed в 1-м Div, но во 2-м Div также рассчитывается сумма. Причина, которую я знаю; Это потому, что div создается с использованием массива, и у меня есть одна общая переменная. Теперь возникает вопрос, как создать динамическую c переменную?

enter image description here

В приведенном ниже коде вы найдете {{ заявленный }} которая является общей переменной, и мне нужно, чтобы она была динамической c: 

<p>Total Claimed: [<span [ngClass]="{'text-success': claimed <= d.program_max_limit, 'text-warning': claimed > d.program_max_limit}">{{claimed | number : '2.'}}&nbsp;</span> Of {{d.program_max_limit | number : '2.'}}]</p>

component.ts Это функция части вычисления: 

  calc(event,val, id) {
    console.log(val,id)
    var i=0;
    if(id == event.target.value){
       if(event.target.checked ){ 
        this.claimed = parseInt(this.claimed) + parseInt(val);
        if (this.claimed > this.max_amount) {
          this.push.showError("You Have Reached the Maximum Limit");
          this.isDisabled = true;
          this.checkForm.reset();
          this.claimed = 0;
        } else {
          this.isDisabled = false;
        }
      } else {
        this.claimed = parseInt(this.claimed) - parseInt(val);
      }

    }

1 Ответ

1 голос
/ 05 апреля 2020

определить массив переменных типа boolean и использовать в таблице. 

check:boolean[]=[]; //<--see that you equal to an array

Я полагаю, у вас есть что-то вроде 

<tr *ngFor="let item of listItems;let i=index">
<td>{{item.invoiceAmmount}}</td>
...
<td><input type="checkbox" [(ngModel)]="check[i]"></td>
</tr>

Тогда вы можете использовать геттер для общей суммы 

get total()
{
   let total=0;
   this.listItems.forEach((x,index)=>{
     if (check[index])
         total+=x.invoiceAmmount;
   })
   return total;
}

И в вашем. html

Total:{{total}}
<div *ngIf="total>max_ammount">You has execeded tha ammout!</div>

ПРИМЕЧАНИЕ: если вы не хотите использовать геттер, вы можете использовать 

<td><input type="checkbox" [ngModel]="check[i]"
                           (ngModelChange)="check[i]=$event;getTotal()">
</td>

getTotal()  //<--your function getTotal
{
       let total=0;
       this.listItems.forEach((x,index)=>{
         if (check[index])
             total+=x.invoiceAmmount;
       })
       this.total=total //<--store the total in a variable "total"
}
...