javascript - 如何创建一个将对象推送到数组中的函数，当再次推送时它将添加额外的对象

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});
}

我正在使用{players| 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>

我正在使用 Angular 7。如果我需要提供 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]