Сделать вариант выбранным по умолчанию угловой 2

Question

У меня есть выпадающий список, который показывает список взрослых пассажиров this.adultPaxArr.Мне нужно, чтобы Выбрать пассажира оставался выбранным по умолчанию при загрузке страницы ....

При событии изменения мне нужно передать индекс выбранного объекта, чтобы статический текстне может быть частью массива.Есть ли способ обойти это?

<select (change)="samePax(passengerIndex)" id="samePax{{passengerIndex}}" style="width:325px;" placeholder="Select a Passenger" [(ngModel)]="adultPaxIdx">
 <option [ngValue]="-1">Select a Passenger</option>
  <option *ngFor="let pax of adultPaxArr;let idx = index;" [ngValue]="idx">
      Passenger {{idx + 1}}
  </option>
</select>

Answer 1

Вы можете написать как ...

В HTML

<select (change)="samePax(passengerIndex)" id="samePax{{passengerIndex}}" 
style="width:325px;" placeholder="Select a Passenger" [(ngModel)]="adultPaxIdx">
  <option [ngValue]="null">Select a Passenger</option>
  <option *ngFor="let pax of adultPaxArr;let idx = index;" [ngValue]="idx">
     Passenger {{idx + 1}}
  </option>
</select>

На стороне TS

adultPaxIdx = null

Answer 2

используйте приведенный ниже код для метода ngOnInit

ngOnInit() {
   this.adultPaxIdx = -1;
}

измените значение (change)="samePax(passengerIndex)" на (change)="samePax(adultPaxIdx)" в html, а в методе ts добавьте условие, как показано ниже

samePax(adultPaxIdx)
{
  if(adultPaxIdx !== -1)
  {
    -- your current code
  }
}

вместоиспользуя индекс, используйте само значение модели

Answer 3

Я бы предложил добавить элемент с помощью ng-if.Значение по умолчанию и значение bool будут определены в вашем файле .ts.

<select (change)="samePax(passengerIndex)" id="samePax{{passengerIndex}}" style="width:325px;" placeholder="Select a Passenger" [(ngModel)]="adultPaxIdx">
 <option [ngValue]="-1">Select a Passenger</option>
  <option *ngFor="let pax of adultPaxArr;let idx = index;" [ngValue]="idx">
      Passenger {{idx + 1}}
  </option>

  # Starts here

  <option *ngIf="!initialized" [ngValue]="-1">
      {{default}}
  </option>

</select>

Answer 4

Измените его на:

 <option [ngValue]="undefined">Select a Passenger</option>

Stackblitz для вашего реф

Answer 5

сделать значение adultPaxId как -1 внутри конструктора

this.adultPaxIdx = -1;

Демо