угловой [(ngModel)] внутри * ngFor

Question

Почему все поля ввода связываются после того, как я пытаюсь добавить пользователя?

https://stackblitz.com/edit/angular-4e65ne

Я назначаю их различным элементам в массиве.

Answer 1

Вы добавляете один и тот же объект пользователя в свой массив несколько раз.Также излишне сложно, вы можете уменьшить это до:

Вы можете уменьшить AppComponent до

import { Component } from '@angular/core';
import { NewUser } from './user.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  public user1 = Array<NewUser>();

  addUser() {
    this.user1.push(<NewUser>{
      userId: 'userId1',
      reason: 'reason1'
    });
  }
}

Тогда ваше связывание работает просто отлично:

<div class="input-group-prepend">
    <span class="input-group-text addUser" (click)="addUser()">+ User</span>
</div>

<div *ngFor="let i of user1; let index = index"> 
  <div class="input-group mb-3" >

    <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">User Id</span>
    </div>
    <input type="text" class="form-control" name="userid-{{index}}" [(ngModel)]="user1[index].userId"> {{index}}
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">Reason</span>
    </div>
      <input type="text" class="form-control" name="reason-{{index}}" [(ngModel)]="user1[index].reason">

    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1" (click)="removeUserId(index)"><i class="fa fa-trash" aria-hidden="true"></i></span>
    </div>
  </div>
</div>

Stackblitz: https://stackblitz.com/edit/angular-bamrwa?file=src%2Fapp%2Fapp.component.ts

Answer 2

Вы можете просто добавить новый объект в array:

addUser(){
       this.user1.push({userId:'', reason:''});
    }

Answer 3

Ну, вы назначаете один и тот же объект NewUser в каждой позиции в вашем массиве.Вы должны инициализировать вашу переменную this.user пустым объектом в конце вашего метода:

 addUser(){
   _.assign(this.user[this.userCount], <NewUser>{
   userId: 'userId1',
   reason: 'reason1'
   });

 this.user1[this.userCount] = this.user;
 this.userCount++;
 this.user = <NewUser>{}; // Here you have to reset the variable
}