Получить значение из ng для сгенерированных входов - PullRequest
0 голосов
/ 21 февраля 2019

Я делаю приложение с Ionic Framework, пока у меня есть входные данные, сгенерированные * ngFor, и я хочу получить значение каждого входа после нажатия кнопки.Я пытался с реактивными формами, но не смог заставить его работать.

<ion-list>
  <ion-item *ngFor="let item of players; index as i">
    <ion-chip>
     <ion-input placeholder="Nombre jugador {{i+1}}"  type="text"></ion-input>
     <ion-icon name="person-add"></ion-icon>
   </ion-chip>
 </ion-item>
<br />
</ion-list>

и мой файл .ts.

 ngOnInit() {
  this.getJugadores();
 }

getJugadores(){
  this.storage.get("num_players").then(x =>{
    if (x){
      this.players = new Array(x);
    }else{
      console.log("error");
    }
  });
}

Я хочу сохранить каждое значение в массивеобъекты.

1 Ответ

0 голосов
/ 21 февраля 2019

В Angular один из самых простых способов получить / установить данные в форме - просто использовать [(ngModel)] привязку данных.

1) Определить структуру для ваших данных.Если у вас есть несколько входов, рассмотрите возможность определения массива.

2) Привязать к этой структуре, используя [(ngModel)].

Вот некоторая информация, которая может помочь: https://angular.io/guide/template-syntax#binding-syntax-an-overview

Код шаблона

  <div *ngFor="let item of players; index as i">
     <input placeholder="Nombre jugador {{i+1}}"  type="text"
            [(ngModel)]="item.name"/>
 </div>

Код компонента

  players: Player[] = [];

  ngOnInit() {
    // Call a service to get data
    // Hardcoded here as an example
    this.players = [
      {id: 1, name: "Joe"},
      {id:2, name: "Stefan"}
    ]
  }

Код интерфейса

export interface Player {
  id: number,
  name: string
}

У меня есть рабочий пример: https://stackblitz.com/edit/angular-b5uppm

...