Блог

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

Проблема в том, что значение не определено. Когда я использовал angular material, это работало, но теперь я использую bootstrap и перестал работать.

HTML:

 <select  class="custom-select" (change)="updatePlayerRole($event,i)" style="text-align-last: center;" >
  <option selected disabled value>Role</option>
  <option value="top">Top</option>
  <option value="jungle">
    <img src="/assets/Images/waiting/jungle.png" height="20" width="20"/>Jungle
  </option>
  <option value="mid">
    <img src="/assets/Images/waiting/mid.png" height="20" width="20"/>Mid
  </option>
  <option value="bot">
    <img src="/assets/Images/waiting/bot.png" height="20" width="20"/>Bot
  </option>
  <option value="support">
    <img src="/assets/Images/waiting/support.png" height="20" width="20"/>Support
  </option>
  <option value="fill">
    <img src="/assets/Images/waiting/fill.png" height="20" width="20"/>Fill
  </option>
</select>
  

 updatePlayerRole(value,i){
    console.log(value.value);
    console.log(value);
    console.log(i);
    this.team[i].role = value.value;
    this.checkIfFormIsCompleted();
}
  

Что я делаю не так? Или метод изменения используется неправильно?

Для начала выполните следующие действия:

1. Создайте массив строк для ваших параметров в вашем файле component.ts.
2. перебирайте массив в вашем html, чтобы создать свои параметры.
3. передайте $event.target.value своему (change)="updatePlayerRole($event.target.value)"

простой пример ниже:

component.ts

 export class AppComponent  {
  options: string[] = [
    'top',
    'jungle',
    'mid',
    'bot',
    'support',
    'fill'
  ];

  selectedOption: string = '';

  updatePlayerRole(value: string) {
    console.log(value);
    this.selectedOption = value;
  }

}
  

затем в вашем component.html

 <select (change)="updatePlayerRole($event.target.value,i)">
  <option disabled>Please Select</option>
  <option *ngFor="let option of options" [value]="option">{{ option }} 
  </option>
</select>
    
<p>Selected Option: <strong>{{selectedOption || 'nothing is selected'}}</strong></p>
  

Это даст вам строковое значение в updatePlayerRole() методе внутри вашего компонента.

Вот пример stackblitz для вас: https://stackblitz.com/edit/angular-oxvygr