Question

这是我的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>

这是我的打字稿片段：

  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 匹配的选项。如何将绑定与 [selected] 结合在一起？

Answer 1

你可以试试吗？

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

Answer 2

它显示与glevel3.name匹配的选项。我怎么能够将绑定与[selected]结合在一起？

您可以通过在selectedg3方法中初始化ngOnInit()属性，如下所示：

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

Answer 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 ，因此它将保存启动的变量。

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

3 个答案: