Question

我有一个绑定到ngModel的选择框：

tempHours = [
    {},
    {},
    {},
    ...
]

<select name="repeat" [(ngModel)]="tempHours[index].repeat">
    <option value="Every" selected>Every Day</option>
    <option value="Every Other">Every Other Day</option>
</select>

第一次到达此代码时，tempHours [index]是一个空对象。因此，ngModel正在插入一个带有未定义值和空白文本的选项标记，并且不尊重所选属性。

在阅读有角度的bug追踪器时，他们将此作为一个功能而非瑕疵进行辩护，但这显然不是所希望的行为。我可以通过预定义所有的tempHours对象来重复＃34; Every＆＃34;，但是如果未定义的话，必须有更优雅的方式让ngModel回退到html属性。

有什么建议吗？或者我只是要为重复预定义tempHours对象？

Answer 1

你可以这样做：

<select name="repeat" 
    [ngModel]="tempHours[index]?.repeat || 'Every'" 
    (ngModelChange)="onRepetitionChange(index, $event)">
  <option value="Every">Every Day</option>
  <option value="Every Other">Every Other Day</option>
</select>

在剧本方面：

onRepetitionChange(index, newValue) {
  if (!this.tempHours[index]) {
    this.tempHours[index] = {};
  }
  this.tempHours[index].repeat = newValue;
}

我们的想法是将[(ngModel)]分成两部分：

[ngModel]使用?.（存在运营商）并且如果密钥不存在则具有默认值，
(ngModelChange)用于处理所选选项更改时发生的情况。

StackBlitz Demo

未定义ngModel时的select的默认值

1 个答案: