在Angular 2的ng2-tag-input下拉菜单中添加一个按钮,可以通过自定义模板来实现。下面是一个完整的解决方案:
npm install ng2-tag-input
import { Component } from '@angular/core';
import { TagInputModule } from 'ng2-tag-input';
@Component({
selector: 'app-your-component',
template: `
<tag-input [(ngModel)]="tags">
<tag-input-dropdown [showDropdownIfEmpty]="true">
<ng-template let-item="item" let-index="index">
{{ item }}
<button (click)="handleButtonClick(item)">按钮</button>
</ng-template>
</tag-input-dropdown>
</tag-input>
`,
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
tags = ['tag1', 'tag2', 'tag3'];
handleButtonClick(item: string) {
console.log('按钮被点击,当前项:', item);
// 在这里添加你的逻辑代码
}
}
<tag-input>
组件来创建标签输入框,并使用[(ngModel)]
来绑定输入的标签。然后,使用<tag-input-dropdown>
组件来创建下拉菜单。在下拉菜单中,使用<ng-template>
来自定义每个下拉项的模板。在模板中,你可以添加一个按钮,并绑定点击事件。tags
数组来存储输入的标签。在handleButtonClick
方法中,你可以处理按钮点击事件,并传递当前项的值。这样,你就可以在ng2-tag-input的下拉菜单中添加一个按钮了。你可以根据自己的需求来自定义按钮的样式和逻辑。
领取专属 10元无门槛券
手把手带您无忧上云