Angular（Typescript）：如果双向绑定，如何将 selected 选项设置为“selected”？答案

【问题标题】：Angular (Typescript): How can I set option of selected to 'selected' if two-way binded?Angular（Typescript）：如果双向绑定，如何将 selected 选项设置为“selected”？
【发布时间】：2019-01-17 19:29:33
【问题描述】：

这是我的 html sn-p:

  G Level 3:
  <select [ngModel]="selectedg3" (ngModelChange)="selectG3Changed($event)">
      <option [ngValue]="g3" *ngFor="let g3 of fetchService.gLevels3" [selected]="g3.name == selectedTask.glevel3.name">{{g3.name}}</option>
  </select><br>

这是我的打字稿 sn-p:

  selectG3Changed(g3:GLevel){
    this.selectedg3 = g3;
  }

我的 select 包含所有选项但保持为空，它没有选择设置选项。

但如果我像这样删除我的绑定：

  G Level 3:
  <select>
      <option *ngFor="let g3 of fetchService.gLevels3" [selected]="g3.name == selectedTask.glevel3.name">{{g3.name}}</option>
  </select><br>

它显示与 glevel3.name 匹配的选项。如何将 binding 与 [selected] 结合使用？

【问题讨论】：

标签： html angular typescript select data-binding

【解决方案1】：

你可以试试这个吗？

  <select (change)="selectG3Changed($event)">
      <option *ngFor="let g3 of fetchService.gLevels3" [selected]="g3.name === selectedTask.glevel3.name">{{g3.name}}</option>
  </select><br>

【讨论】：

我以前试过。但这不会发送对象，对吧？它只是发送一个值。但我需要整个对象。
它将在 selectG3Changed 方法中发送完整的事件对象。
这就是我得到的。这不是我的 g3 对象，而是事件对象：事件 {isTrusted: true, type: "change", target: select, currentTarget: select, eventPhase: 2, ...}。 --> 如何获得我的 g3-Object？
只需将g3参数的类型替换为any而不是GLevel并使用浏览器开发工具调试它，然后您将能够看到您需要

【解决方案2】：

它显示与 glevel3.name 匹配的选项。我怎样才能将绑定与 [selected] 结合？

您可以通过在ngOnInit() 方法中初始化您的selectedg3 属性来做到这一点，如下所示：

this.selectedg3 = this.fetchService.gLevels3.filter(x=>x.name ===selectedTask.glevel3.name)[0];

【讨论】：

我不想过滤。那我就没有机会选择其他选项了吧？我想在我的选择中保留所有选项，但它显示了与我选择的任务中的选项匹配的选项。所选任务来自一个表。
> Then I won't have the opportunity to select other options, right? 为什么？这只是默认选择值的第一次初始化，仅此而已

【解决方案3】：

使用这个 html 代码：

  G Level 3:
  <select [ngModel]="selectedg3" (ngModelChange)="selectG3Changed($event)">
      <option [ngValue]="g3" *ngFor="let g3 of fetchService.gLevels3" [selected]="g3.name == selectedTask.glevel3.name">{{g3.name}}</option>
  </select><br>

结合函数内的这个初始化table-row click(){...}：

this.selectedg3 = this.selectedTask.glevel3;

选择会显示我的selectedTask的glevel3

我的 [ngModel] 是双向绑定到变量 selectedg3 的，因此它将保存已启动的变量。

【讨论】：