如何使用angular5在ngFor中绑定ngModel

Question

Cananyone please help. I am using ngFor to iterate through an array and I need to bind the headings to ngModel. How many headings i have entered, that all headings i tested by giving an alert in ts file. It gives an empty alert.

https://stackblitz.com/edit/angular-gzcy61?file=src%2Fapp%2Fapp.component.css

Thanks in advance.

Answer 1

You are not storing the input value in arrayOfObj;

Just click the 'Add new heading button" and enter whatever you want in the <input> block; replace your code in stackblitz with the following HTML and TS.

app.component.html

 <input type="text" [(ngModel)]="head1" placeholder="enter text"> <ng-template #temp> <div *ngFor="let a of arrayOfObj"> <input class="form-control" id="usr" placeholder="Enter heading..." [(ngModel)]="a.head2"> <br> <br> <div class="col-md-2"> <div class="btn-div"> <div class="ss" (click)="onAddRow()" *ngIf="tmpo!=2;else tempo">Add new heading {{a.count}}</div> </div> </div> </div> </ng-template> <div class="col-md-2"> <div class="btn-div"> <div class="ss" (click)="onAddRow()" *ngIf="tmpo!=1;else temp">Add new heading</div> <input type="button" class="ss" value="submit" (click)="submit()"> </div> </div> 

app.component.ts

    import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  head1: string = '';
  head2: string = '';
  tmpo;
  count = 0;
  arrayOfObj: any[];

  constructor() {
    this.arrayOfObj = [];
  }

  onAddRow() {
    this.tmpo = 1;
    this.count++;
    this.arrayOfObj.push({ "count": this.count, "head2": "" });
  }

  onAddRow1() {
    // this.tmpo=2;
  }

  submit() {
    console.log(this.arrayOfObj);
    for (var i=0; i<this.arrayOfObj.length; i++){
      alert(this.arrayOfObj[i].head2);
    }
    //alert(this.head1)
    //alert(this.head2)
  }

}

Answer 2

I think you misunderstood on how the binding works and about how you bind it.

Even structurally, you are not doing it right in terms of HTML, or maybe I just don't understand what are you trying to do.

For your case, at the moment, the array is just a normal array, you need to turn it into array of object, such as:

export class AppComponent {
  head1: string = '';
  head2: string = '';
  tmpo;
  count = 0;
  arrayOfObj: {head: string; position: number}[] = [];

onAddRow(){
this.tmpo=1;
this.count ++;
this.arrayOfObj.push({head: '', position: this.count});
}

Then your HTML can be:

<ng-template #temp>
  {{arrayOfObj|json}}
  <div *ngFor="let a of arrayOfObj; let i = index">
      <input class="form-control" id="usr" placeholder="Enter text..." [(ngModel)]="arrayOfObj[i].head"> 
        <br>
        <br>   

        <div class="col-md-2">
            <div class="btn-div">
              <div class="ss" (click)="onAddRow()" *ngIf="tmpo!=2;else tempo">Add new heading {{a.position}}</div>
            </div>
        </div>
  </div>
</ng-template>

ngModel does work in for loop, but you need to reference it by the array via index.