angular - ngModel 未定义时选择的默认值

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 插入了一个带有未定义值和空白文本的选项标签，并且不尊重所选属性。

在阅读 Angular 错误跟踪器时，他们将其辩护为功能而不是错误，但这显然不是理想的行为。我可以通过并预定义所有 tempHours 对象，使其重复为“Every”，但如果 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 演示