在Angular中使用ng-select标签输入,并在失去焦点时创建标签,可以使用ng-select的blur事件和ng-select的addTag方法来实现。以下是一个示例代码:
在组件的HTML模板中,使用ng-select标签,并添加blur事件监听器和addTag方法:
在组件的TypeScript文件中,定义items数组和onBlur、onAddTag方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
items = ['Tag1', 'Tag2', 'Tag3'];
onBlur(event: any) {
// 在失去焦点时创建标签
if (event.target.value !== '') {
this.onAddTag({ label: event.target.value });
event.target.value = '';
}
}
onAddTag(tag: any) {
// 添加标签到items数组
this.items.push(tag.label);
}
}
在上述示例中,当ng-select失去焦点时,触发blur事件,调用onBlur方法。如果输入框中有值,调用onAddTag方法将输入框的值添加到items数组中,并清空输入框的值。通过这种方式,在失去焦点时可以动态创建标签。