How to get input value inside ngFor?


#1

I need to get input value inside ngFor, are inputs created dynamically with ngFor and wanted the value of each.

<ion-item-group *ngIf="adicionais && adicionais.length">
 <ion-item-divider color="light">Adicionais</ion-item-divider>
	<ion-item *ngFor="let adc of adicionais;let i = index">
	<ion-label>{{adc.descri}} - R$ {{money(adc.preco)}}:</ion-label>
	    	<ion-input type="text" value="0" [(ngModel)]="adcs[i].qtd" (keyup)="addc()"></ion-input>
	</ion-item>
</ion-item-group>

#2

Look in the qtd property of each member of adcs.


#3
<ion-input type="text" (keyup)="valChange($event.target.value, adc.idADC)"></ion-input>

I did it another way. now I need to enter data inside an array how do I?

let dados:any[] = [{'idADC':idADC, 'qtd':value}];
      this.adcs.push(dados);

it is showing an error: “ERROR TypeError: Cannot read property ‘push’ of undefined”;


#4

You’ve made it worse. Can we go back to ordinary life with a normal [(ngModel)] binding and no keyup listener? Let the framework handle low-level events: that’s what it’s good at.


#5

ok, so let’s go: my variable that gets ngModel is this:

adcs:any[];

I need two information in it for input with value above 0: Quantity and ID. How do I do ?


#6

Don’t abuse any and the build tools will help you find your bug.

Declare an actual interface, such as

interface Adicional {
  id: string;
  qtd: string;
}

…now adcs will be of type Adicional[], and should be initialized at the point of declaration:

adcs: Adicional[] = [];

Now your “Cannot read property ‘push’ of undefined” should be fixed, because adcs is no longer undefined when you try to call its push method. Additionally, one more bug will go away because you will get warned that you are trying to push an incompatible type.


#7
interface Adicional {
  id: string;
  qtd: string;
}

Where to declare?


#8

I did as you told me, but it made a mistake:
ERROR TypeError: Can not read property ‘qtd’ of undefined

import { ServerProvider } from '../../providers/server/server';

interface Adicional {
  id: string;
  qtd: string;
}


@IonicPage()
@Component({
  selector: 'page-delivery-addcart',
  templateUrl: 'delivery-addcart.html',
})