ngModel 未定义时选择的默认值答案

【问题标题】：Default value of select when ngModel is undefinedngModel 未定义时选择的默认值
【发布时间】：2018-08-20 22:04:48
【问题描述】：

我有一个绑定到 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 对象？

【问题讨论】：

标签： angular ngmodel

【解决方案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

【讨论】：

请注意，这将在 UI 中选择正确的值，但不会使用值“Every”初始化 repeat 属性。
我刚刚提出它是因为 OP 声明 > 我可以通过并预定义所有 tempHours 对象以重复为“Every”，但必须有一种更优雅的方式让 ngModel 下降如果未定义，则返回 html 属性。
@DanielWSrimpel 是的，很抱歉，我在重读 OP 时删除了我的评论。好点。