如何在 ionic 3 或 angular 4 中实现多个标记

Question

我想实现 multiple tagging 我不知道任何具体的包。

我想为这组data 拥有多个tagging。

skills = ['javascript','angular 4','css','php',..............];

我想要类似的multiple tagging 就像select2 这里是演示：https://select2.org/tagging

提前致谢！！！！

Answer 1

关于ionic3，你可以使用下面提到的npm包

npm install ng2-tag-input

安装包后，需要像这样在模块文件中添加依赖，

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TagInputModule } from 'ng2-tag-input';

imports: [
     BrowserAnimationsModule,
     TagInputModule
  ]

例如，如果您有一个名为 home 的组件，那么您需要在 home.ts 文件中添加这样的代码，

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    skills = ['javascript','angular 4','css','php'];

 constructor(public navCtrl: NavController) {

 }

}

最后在你的模板文件中你需要写这样的东西，

home.html

<tag-input [(ngModel)]='skills'></tag-input>