首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在angular 2 ng2-tag-input中重新条带化显示的项目

在Angular 2的ng2-tag-input中重新条带化显示的项目,可以通过以下步骤实现:

  1. 首先,确保已经安装了ng2-tag-input库。可以通过以下命令进行安装:
代码语言:txt
复制
npm install ng2-tag-input --save
  1. 在需要使用ng2-tag-input的组件中,导入ng2-tag-input的相关模块:
代码语言:typescript
复制
import { TagInputModule } from 'ng2-tag-input';
  1. 在组件的NgModule中,将TagInputModule添加到imports数组中:
代码语言:typescript
复制
@NgModule({
  imports: [
    TagInputModule
  ]
})
  1. 在组件的HTML模板中,使用ng2-tag-input指令来创建标签输入框:
代码语言:html
复制
<tag-input [(ngModel)]="tags"></tag-input>
  1. 在组件的TypeScript代码中,定义一个tags数组来存储标签数据:
代码语言:typescript
复制
tags: string[] = ['tag1', 'tag2', 'tag3'];
  1. 如果要重新条带化显示项目,可以使用ng2-tag-input的自定义模板功能。在组件的HTML模板中,使用template属性来定义自定义模板:
代码语言:html
复制
<tag-input [(ngModel)]="tags" [template]="customTemplate"></tag-input>

<ng-template #customTemplate let-item="item">
  <span class="tag">{{ item }}</span>
</ng-template>

在上面的例子中,我们定义了一个customTemplate模板,用于自定义标签的显示样式。可以根据需要修改样式。

这样,当标签输入框中的标签发生变化时,ng2-tag-input会自动重新条带化显示项目。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB)等。您可以通过腾讯云官方网站了解更多产品信息和详细介绍。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券