Question

我尝试创建动态数量的文本输入，并将每个输入绑定到对象a中字符串数组中的值。这似乎产生了奇怪的问题。我在文本框中键入的每个字母都会取消选择文本框，当我向列表中添加新项目时会发生不可预测的事情。有什么想法发生了什么？

模板：

<div *ngFor="let listItem of a.list; let i = index;">
    <input type="text" name="sourceText" id="sourceText" class="form-control"
        placeholder="Enter item" required [(ngModel)]="a.list[i]">
</div>
<a (click)="a.list.push('')">Add new item...</a>

打字稿：

export class MyClass {
    a: { list: string[] };

    constructor() {
        this.reset();
    }

    reset() {
        this.a = {list: ['']};
    }
}

Answer 1

这是因为您为所有元素id="sourceText"提供了相同的ID。尝试将索引附加到标识id="source text"+i，然后看，它应该可以工作。 Id对于所有元素都应该是唯一的。

Answer 2

试试这个 -

<div *ngFor="let listItem of a.list; let i = index;">
    <input type="text" name="sourceText"+i id="sourceText"+i class="form-control"
    placeholder="Enter item" required [(ngModel)]="a.list[i]">
</div>

问题在于它包含相同的名称（可选）和ID（对于每个资源标记应该是唯一的）。

因此，请更改您的ID标记“ sourceText”+ i 和上面的名称标签，看看它是否有效。

Angular 2 - 每次输入字母时取消选择输入

2 个答案: