Select - 设置禁用的选定选项以及绑定 *ngfor 选项

Question

我有一段代码没有按照我想要的方式运行。

基本上我想让 "Please select a team" 值作为默认选择选项出现，这样我就不必为下拉列表分配可见标签（我希望这是有意义的）。

代码工作正常，因为团队值出现并且 "Please select a Team" 出现，但是下拉选择 *ngfor 选项的第一个元素而不是 "Please select a Team" 选项

任何人都可以解释一下吗？我是 Angular 的新手，所以要温柔。

<label for="team" class="sr-only">Team </label>
  <select [(ngModel)]="model" autocomplete="off" required>
      <option value="default" disabled selected>Please select a 
Team</option>
      <option *ngFor="let team of teams" [value]="team.name"> {{team.name}}</option>
  </select>

Answer 1

disabled不能同时selected。选择一个。

Answer 2

您需要对 value 属性使用 Angular 的数据绑定。将 value="default" 更改为 [value]="default"。另外请务必阅读 this Angular 文档以了解有关数据绑定的更多信息

看看 this stackblitz 并告诉我这是否是您的预期结果

Select - 设置禁用的选定选项以及绑定 *ngfor 选项

Select - Setting a disabled selected option as well as having a bound *ngfor option

angular-ngmodel

angular

angular7