angular2 добавить элементы в зависимости от выбранного значения

Question

Привет, ребята, я новичок в Angular2 и Ionic2. Я стараюсь в лучшем случае использовать все их возможности.

Я хотел бы динамически заполнять div в зависимости от значения select до самого div.

это будет HTML

<ion-item>
  <ion-label>Num of trips</ion-label>
  <ion-select [(ngModel)]="tripNum" (ngModelChange)="doTrips()">
    <ion-option value="1">1</ion-option>
    <ion-option value="2">2</ion-option>
    <ion-option value="3">3</ion-option>
  </ion-select>
  <ng-container *ngIf="tripNum"> //?? not sure about what in here.. 
    <div *ngFor="let trip of trips">
      <ion-item>
        <ion-label>Trip {{trip}}</ion-label>
      </ion-item>
    </div>
  </ng-container>
</ion-item>

Я создал интерфейс Trips, объявленный как trips:Trips[]

export interface Trips {
  duration : string;
  nofservices : number;
}

Функция "doTrips()" должна добавлять столько массивов Trips в массив trips[] в зависимости от tripNum. Тогда, на мой взгляд, * ngfor должен добавить столько элементов, сколько содержится в массиве trips, и в конце концов связать свойства trip с html thru [(ngModel)].

Надеюсь, что вопрос ясен.. Я немного запутался в том, что использовать

Answer 1

Вы уже используете ngModelChangeТаким образом, нет необходимости в двустороннем связывании. [(ngModel)] коротка для [ngModel]="tripNum" (ngModelChange)="doTrips($event)", так что вы можете использовать это вместо.

Также вам нужно переместить ng-container вне ion-item чтобы ваш код работал. Итак, ваш шаблон будет выглядеть так:

<ion-item>
  <ion-label>Num of trips</ion-label>
  <ion-select [ngModel]="tripNum" (ngModelChange)="doTrips($event)">
    <ion-option value="1">1</ion-option>
    <ion-option value="2">2</ion-option>
    <ion-option value="3">3</ion-option>
  </ion-select>
</ion-item>


<ng-container *ngIf="tripNum"> 
  <div *ngFor="let trip of trips">
    <ion-item>
      <ion-label>Trip </ion-label>
    </ion-item>
  </div>
</ng-container>

Вы doTrips-функция будет выглядеть так:

doTrips(tripNum: number) {
  // declare obj of type Trips
  let obj = <Trips>{}
  // loop to add number of objects based on the value of tripNum
  for(let i= 1; i<=tripNum; i++) {
    this.trips.push(obj);
  }
  this.tripNum = tripNum;
}

Теперь мы должны помнить, что каждый добавленный объект является просто пустым объектом типа Tripsтак что на самом деле в шаблоне нет значений для отображения. Но вы можете назначить значение в doTrips Функция, если вы хотите / нужно.

Наконец, ДЕМО.

---

Обновить:

Теперь я вижу из комментария, что вы хотите добавить значение по умолчанию для nofservicesТаким образом, ваша функция будет выглядеть так:

doTrips(tripNum: number) {
  // loop to add number of objects based on the value of tripNum
  for(let i= 1; i<=tripNum; i++) {
    this.trips.push(<Trips>{duration:'',nofservices:0});
  }
  this.tripNum = tripNum;
}

Обратите внимание, что вам нужно добавить имя свойства в шаблоне для вашего trip, вот так:

<ion-label>Trip {{trip.nofservices}}</ion-label>