Свойство Angular [selected] работает только на init

Question

Я использую select с некоторыми опциями, которые будут установлены циклом ngFor.Каждый параметр имеет свойство [selected] и должен выводить индекс на консоль при его выборе.Проблема в том, что функция будет выполняться при обновлении / загрузке страницы, а не при нажатии на значение из раскрывающегося списка.

Это минимальный пример: https://stackblitz.com/edit/angular-multi-select-rppf99

I'mиспользуя Anuglar 5+ на данный момент

Answer 1

selected будет использоваться, если вы хотите выбрать начальную опцию в раскрывающемся списке.Что вы хотите, это слушать изменения в раскрывающемся списке.Если вы хотите передать индекс функции, но сохранить идентификатор как value, вы можете использовать vanilla JS и $event, чтобы получить выбранный индекс:)

<select (change)="AddTarget($event.target.selectedIndex)">
  <option *ngFor="let target of availableTargets; let i = index" [value]="target.id" >
    {{target.name}}
  </option>
</select>

DEMO: StackBlitz

Answer 2

Этот ответ основан на ответе @ AJT_82 в разделе комментариев.Если вы хотите конкретно найти индекс, вы должны изменить передаваемое значение [value], то есть i для индекса.В противном случае вы можете изменить его на target.id, например, если вы хотите передать id в функцию.

Вот отредактированный пример: https://stackblitz.com/edit/angular-multi-select-j5u27t?file=app/app.component.html

Дайте мне знать, еслиВам нужно что-нибудь более объясненное.