Question

我正在尝试将用户对象添加到数组中，以最终提交用户列表。

I have declared the following:
people: any[];
person = {
       name:'',
       age: ''
       }

我正在使用formbuilder.group成功收集人员的姓名和年龄（这是在ngOnInit（）中完成的。但是，我正在努力将多个人员添加到人员数组中）。我尝试了以下方法：

addPerson() {
    let person = this.peopleForm.value;
    this.people.push({name: person.name, age: person.age});
}

我正在使用{位玩家| json}以显示捕获的值，但是，当我成功单击addPerson（）后再次使用该表单时，添加的值将更新为未添加。

预期行为：

输入新名称和详细信息后，必须将新对象推入人员数组，以便显示新添加的人员，即

people[
      {name: firstSubmittionName, age: firstSubmittionName},
      {name: secondSubmittionName, age: secondSubmittionName} 
      ]

<form (ngSubmit)="addEvent(f)" #f="ngForm" [formGroup]="eventForm">
      <div class="form-group">
        <label for="name">Name of person</label>
        <input
          type="text"
          id="name"
          formControlName="name"
          class="form-control"
        />
        <div class="form-group">
          <label for="attendingState">User attending status</label>
          <select
            class="form-control"
            name="state"
            id="state"
            formControlName="state"
          >
            <option *ngFor="let state of attendingState [ngValue]="state">
              {{ state }}</option>
          </select>
        </div>
      </div>
      <button (click)="addConfirmed()">
        Add Player
      </button>
      Value: {{ people | json }}
    </form>

我正在使用Angular7。请告诉我是否需要提供lil或为我的问题加载更多详细信息，谢谢。我假设我需要添加索引以避免重复/更新？不确定。

好消息，我想我了解我所面临的与不变性有关的问题，我已经实施了以下解决方案来解决我的问题：

addConfirmed() {
    let group = [];
    let person = this.eventForm.value;
    group.push( person );
    let newArray = this.people;
     if( newArray === undefined){
       this.players = group; 
     } else {
         this.players = group.concat(newArray);
         console.log('this is the group value ', this.people);
}
}

我需要在函数中使用一个新数组，以使我使用的数组不可变。

Answer 1

尝试一下：

this.people = [...this.people, person]

如何创建将对象推入数组的函数，再次推入时将添加其他obj

1 个答案: