Как создать функцию, которая помещает объекты в массив, при повторном нажатии добавит дополнительный объект - PullRequest
0 голосов
/ 25 мая 2019

Я пытаюсь добавить объект пользователя в массив, чтобы в конечном итоге отправить список пользователей.

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

Я использую formbuilder.group для успешного сбора имени и возраста человека (это делается в ngOnInit (). Однако я пытаюсь добавить более одного человека в массив people. Я пробовал следующее:

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

Мне нужно было использовать новый массив в моей функции, чтобы сделать массивы, которые я использую, неизменяемыми.

1 Ответ

2 голосов
/ 25 мая 2019

Попробуйте это:

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

...