angular input中回车生成标签
时间: 2023-05-03 08:03:51 浏览: 162
在Angular中,可以通过监听输入框的键盘事件来实现在输入框内按下回车键时生成标签的功能。具体实现方法如下:
1. 在HTML中定义输入框和标签列表:
```html
<input type="text" [(ngModel)]="tagValue" (keyup.enter)="addTag()">
<ul>
<li *ngFor="let tag of tags">{{ tag }}</li>
</ul>
```
2. 在组件中定义输入框的值和标签列表,并实现添加标签的方法:
```typescript
export class AppComponent {
tagValue = '';
tags: string[] = [];
addTag() {
if (this.tagValue) {
this.tags.push(this.tagValue);
this.tagValue = '';
}
}
}
```
在输入框中输入标签名称,然后按下回车键即可将其添加为一个新的标签。这个标签会被添加到标签列表中。如果输入框内没有输入任何内容,则按下回车键不会有任何效果。
以上就是在Angular输入框中回车生成标签的实现方法。
阅读全文
相关推荐











