Angular [selected] 属性仅在 init 上运行

Question

我使用带有一些选项的选择，这些选项将由 ngFor 循环设置。每个选项都具有[selected] 属性，并且应在选择时将索引打印到控制台。问题是该功能将在页面刷新/加载时执行，而不是在单击下拉列表中的值时执行。

这是一个最小的例子：https://stackblitz.com/edit/angular-multi-select-rppf99

我目前正在使用 Anuglar 5+

Answer 1

selected 将被使用，当您想在下拉列表中选择一个初始选项时。你想要的是听下拉列表中的变化。如果您想将索引传递给函数，但将 id 保留为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>

演示：StackBlitz

Answer 2

此答案基于@AJT_82 在评论部分的答案。如果您想专门查找索引，则必须更改传入的[value]，即索引的i。否则，您可以将其更改为 target.id，例如，如果您想将 id 传递给函数。

这是编辑后的示例：https://stackblitz.com/edit/angular-multi-select-j5u27t?file=app/app.component.html

如果您需要进一步解释，请告诉我。