属性在 Angular 中的输入上绑定 List 属性答案

【问题标题】：Property Binding the List property on an input in Angular属性在 Angular 中的输入上绑定 List 属性
【发布时间】：2021-02-05 19:10:30
【问题描述】：

<input [list]="foo + 'name'"/>
<input list={{foo + 'name'}}/>

富

public foo : number = 3;

本质上，我想创建绑定到动态输入的动态列表。我遇到的错误是

无法设置只有 getter 的 [object HTMLInputElement] 的属性列表

我知道这很酷，输入元素上的属性 list 没有 setter，它只有一个 getter。我该如何解决这个问题。我想创建一个绑定到动态数据列表元素的动态输入（在运行时）

【问题讨论】：

属性绑定对你有用吗？ <input [attr.list]=""/>angular.io/guide/attribute-binding#binding-to-an-attribute
我用 [attr.list] 属性尝试了你的场景。这是您的场景示例stackblitz.com/edit/…
@BizzyBob 非常感谢。您的两个答案都是正确的，它们对我有用。如果你让你回答问题，我会投票并检查 bizzybob（因为他是第一个）
@Muthupriya 如果你把你的评论变成答案，我会投赞成票

标签： angular

【解决方案1】：

您可以使用attribute binding。假设您有一个名为 theList 的控制器属性设置为 list-a 或 list-b，您可以像这样动态更改它：

示例：

<button (click)="toggleList()">Toggle List</button>

<input [attr.list]="theList" />

<datalist id="list-a">
    <option value="A-1">
    <option value="A-2">
    <option value="A-3">
</datalist>

<datalist id="list-b">
    <option value="B-1">
    <option value="B-2">
    <option value="B-3">
</datalist>

这是一个有效的StackBlitz

【讨论】：

【解决方案2】：

对于属性绑定，您必须为其添加前缀attr。因此，您的 HTML 需要更改为：

<input [arr.list]="foo + 'name'"/>

文档：https://angular.io/guide/attribute-binding#syntax

【讨论】：