要在Angular表单的输入框中显示多个标签,可以使用Angular的ngModel指令和ngFor指令结合使用。
首先,我们需要在组件类中定义一个数组来存储要显示的标签。例如,我们可以在组件类中定义一个名为tags的数组:
tags: string[] = ['Tag1', 'Tag2', 'Tag3'];
然后,在模板中使用ngFor指令遍历tags数组,并在输入框中使用ngModel指令绑定每个标签的值。最终的模板代码如下所示:
{{ tag }}
×
在这个示例中,我们在输入框中使用ngModel指令绑定了一个名为tag的变量。使用(keydown.enter)事件监听键盘按下Enter键的事件,并调用addTag()方法将输入框中的标签添加到tags数组中。同时,我们使用ngFor指令遍历tags数组,在每个标签后面显示一个关闭按钮。
最后,我们可以在组件类中定义addTag()方法和removeTag()方法来添加和删除标签:
addTag() {
if (this.tag && !this.tags.includes(this.tag)) {
this.tags.push(this.tag);
this.tag = '';
}
}
removeTag(tag: string) {
const index = this.tags.indexOf(tag);
if (index !== -1) {
this.tags.splice(index, 1);
}
}
addTag()方法首先检查输入框中是否有值,并且该值不在tags数组中。如果满足条件,将标签添加到tags数组中,并清空输入框的值。
removeTag()方法接收一个标签参数,并在tags数组中找到该标签的索引,并使用splice()方法从数组中删除该标签。
通过以上的步骤,我们就可以在输入框中显示多个标签,并且可以添加和删除这些标签。