Angular 14我们如何为迭代*ngFor循环的select元素设置默认值

Question

我在另一篇文章中看到了这篇文章，问了同样的问题，说它已经得到了回答，但我似乎无法在代码中使用它。在我的组件内部，我有两个这样定义的变量。

MediaOptions: string[] = ['all', 'print', 'screen'];
DefaultOption: string = this.MediaOptions[0];

在我的模板中，我做这个

<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions"
[ngValue]="a"
[selected]="a === DefaultOption ? true : null"
>
{{a}}
</option>
</select>

这不起作用。我也试过以下

<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions; let i = index"
[ngValue]="a"
[selected]="i === 0 ? true : null"
>{{a}}</option>
</select>

<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions"
[ngValue]="a"
[selected]="a === 'all'"
>{{a}}</option>
</select>

我还在[selected]和[attr.selected]之间来回切换。我试着像上一个例子一样删除条件，但似乎都不起作用。自从这个问题被回答后，有什么变化吗？我们需要做些什么才能让它发挥作用？

更新

我忘了在问题中提到，[(ngModel)]绑定到的Value属性是一个setter函数，它看起来像这样。

set Value(val: any){
this.MediaTypeControl = val;
this.onChange(val);
this.onTouch(val);
}

这是在Angular表单中，我使用ControlValueAccessor来创建自定义输入。

Answer 1

检查这个stackblitz示例。

我想你忘了写一个getter函数。