Angular [selected] 属性 仅在初始化时运行

Question

我使用 select 和一些将由 ngFor 循环设置的选项。每个选项都有 [selected] 属性 并且应该在 selected 时将索引打印到控制台。问题是该函数将在页面为 refreshes/loaded 时执行，而不是在单击下拉列表中的值时执行。

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

我目前正在使用 Anuglar 5+

Answer 1

本回答根据@AJT_82在评论区的回答。如果您想专门查找索引，则必须更改传入的 [value]，即索引的 i。否则，如果您想将 id 传递给函数，您可以将其更改为 target.id。

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

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

Answer 2

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