Angular ngIf 将所选属性添加到值为字符串的选项
Angular ngIf to add selected attribute to option where value is string
我想将 selected 属性动态添加到 select 下拉列表的 option。
所以像这样
<select name="gcodeProfile">
<option value="HT Translucent F WF 500 um.gcode.profile" *ngIf='[attr.value] === {{resinFileToLoad.gcodeProfile}}; [attr.selected] = true'>HT Translucent F WF 500 um.gcode.profile</option>
<option value="HT Translucent F WF 500 um.gcode.profile-niki-safe" *ngIf='[attr.value] === {{resinFileToLoad.gcodeProfile}}; [attr.selected] = true'>HT Translucent F WF 500 um.gcode.profile-niki-safe</option>
</select>
在哪里
resinFileToLoad.gcodeProfile = 'HT Translucent F WF 500 um.gcode.profile';
条件实际上应该绑定到 [selected] 属性。 selected 属性不需要 attr，*ngIf 指令也不需要。
尝试以下方法
<select name="gcodeProfile">
<option
value="HT Translucent F WF 500 um.gcode.profile"
[selected]="resinFileToLoad.gcodeProfile === 'HT Translucent F WF 500 um.gcode.profile'"
>
HT Translucent F WF 500 um.gcode.profile
</option>
<option
value="HT Translucent F WF 500 um.gcode.profile-niki-safe"
[selected]="resinFileToLoad.gcodeProfile === 'HT Translucent F WF 500 um.gcode.profile-niki-safe'"
>
HT Translucent F WF 500 um.gcode.profile-niki-safe
</option>
</select>
double-quotes里面的单引号表示比较表达式中的字符串字面量
更新：使用来自 value 属性的值
您可以将模板引用变量分配给选项并在比较中访问它的值。尝试以下
<select name="gcodeProfile">
<option #option1
value="HT Translucent F WF 500 um.gcode.profile"
[selected]="resinFileToLoad.gcodeProfile === option1.value"
>
HT Translucent F WF 500 um.gcode.profile
</option>
<option #option2
value="HT Translucent F WF 500 um.gcode.profile-niki-safe"
[selected]="resinFileToLoad.gcodeProfile === option2.value"
>
HT Translucent F WF 500 um.gcode.profile-niki-safe
</option>
</select>
这里option1和option2分别是选项1和选项2的模板引用变量。另请注意缺少单引号，因为我们不再使用字符串文字。
更新：绑定使用[(ngModel)]
以上解决方案只是针对短下拉菜单的快速修复。如果您需要可扩展的解决方案，则需要使用模板驱动的表单或反应式表单。
模板驱动的表单是入门最快的。您可以 two-way 将默认值绑定到 ngModel 属性.
，而不是使用 value 和 selected 属性
尝试以下方法
<select name="gcodeProfile" [(ngModel)]="resinFileToLoad.ZDir">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
...
</select>
现在默认值绑定到 resinFileToLoad.ZDir 变量。因此，如果您在模板中执行类似 {{ resinFileToLoad.ZDir }} 的操作，您可以看到该值更改了 accd。到 drop-down 选择。如果您不希望有这种行为，即保留 resinFileToLoad.ZDir 的值，您可以删除事件绑定并仅使用 [ngModel]="resinFileToLoad.ZDir".
我想将 selected 属性动态添加到 select 下拉列表的 option。
所以像这样
<select name="gcodeProfile">
<option value="HT Translucent F WF 500 um.gcode.profile" *ngIf='[attr.value] === {{resinFileToLoad.gcodeProfile}}; [attr.selected] = true'>HT Translucent F WF 500 um.gcode.profile</option>
<option value="HT Translucent F WF 500 um.gcode.profile-niki-safe" *ngIf='[attr.value] === {{resinFileToLoad.gcodeProfile}}; [attr.selected] = true'>HT Translucent F WF 500 um.gcode.profile-niki-safe</option>
</select>
在哪里
resinFileToLoad.gcodeProfile = 'HT Translucent F WF 500 um.gcode.profile';
条件实际上应该绑定到 [selected] 属性。 selected 属性不需要 attr，*ngIf 指令也不需要。
尝试以下方法
<select name="gcodeProfile">
<option
value="HT Translucent F WF 500 um.gcode.profile"
[selected]="resinFileToLoad.gcodeProfile === 'HT Translucent F WF 500 um.gcode.profile'"
>
HT Translucent F WF 500 um.gcode.profile
</option>
<option
value="HT Translucent F WF 500 um.gcode.profile-niki-safe"
[selected]="resinFileToLoad.gcodeProfile === 'HT Translucent F WF 500 um.gcode.profile-niki-safe'"
>
HT Translucent F WF 500 um.gcode.profile-niki-safe
</option>
</select>
double-quotes里面的单引号表示比较表达式中的字符串字面量
更新：使用来自 value 属性的值
您可以将模板引用变量分配给选项并在比较中访问它的值。尝试以下
<select name="gcodeProfile">
<option #option1
value="HT Translucent F WF 500 um.gcode.profile"
[selected]="resinFileToLoad.gcodeProfile === option1.value"
>
HT Translucent F WF 500 um.gcode.profile
</option>
<option #option2
value="HT Translucent F WF 500 um.gcode.profile-niki-safe"
[selected]="resinFileToLoad.gcodeProfile === option2.value"
>
HT Translucent F WF 500 um.gcode.profile-niki-safe
</option>
</select>
这里option1和option2分别是选项1和选项2的模板引用变量。另请注意缺少单引号，因为我们不再使用字符串文字。
更新：绑定使用[(ngModel)]
以上解决方案只是针对短下拉菜单的快速修复。如果您需要可扩展的解决方案，则需要使用模板驱动的表单或反应式表单。
模板驱动的表单是入门最快的。您可以 two-way 将默认值绑定到 ngModel 属性.
value 和 selected 属性
尝试以下方法
<select name="gcodeProfile" [(ngModel)]="resinFileToLoad.ZDir">
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
...
</select>
现在默认值绑定到 resinFileToLoad.ZDir 变量。因此，如果您在模板中执行类似 {{ resinFileToLoad.ZDir }} 的操作，您可以看到该值更改了 accd。到 drop-down 选择。如果您不希望有这种行为，即保留 resinFileToLoad.ZDir 的值，您可以删除事件绑定并仅使用 [ngModel]="resinFileToLoad.ZDir".