Angular 2 - 使用芯片代替标签

Question

我正在开发一个角度为2的网站，可以在网站上添加“编程”等技能。现在我在添加新技能时生成标签，我有一个按钮来删除技能。我想要的是使用芯片（见图）

我现在拥有的：

HTML：

<div *ngFor="let skill of skillArray; let i = index">
  <label id = "skills"for="skill">{{skill}}</label>
  <button type="button" (click)="removeSkill(i)">X</button>
</div>

<div id="addSkill">
  <input #newSkill type="text" placeholder="Add your skills here">
  <button (click)="addToSkill(newSkill.value)" class="btn-addskill">Add Skill</button>
</div>

TS：

export class ProfileComponent {
url: any = "";
editMode = false;
skillArray: string[] = [];

addToSkill(skillInput:string) {     
  if (!this.skillArray.find(x => x == skillInput)) {
    this.skillArray.push(skillInput);
  }
}

removeSkill(i: any) {
    this.skillArray.splice(i, 1);
}

芯片：

我知道如何按照https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_contact_chips_close制作芯片，但我很难生成芯片而不是标签

Answer 1

以下是简单的 Chips Example ，可以帮助您构建表单

查看

<div class="control">
  <label class="control-label">Skills</label>
  <ul class="chips-list" (click)="token.focus()" [ngClass]="{ focus: focus }">
    <li *ngFor="let skill of skillArray; let i = index" class="chip">
      <i class="chip__icon"></i> 
      {{ skill }} 
      <span class="chip__close" (click)="removeSkill(i)">&times;</span>
    </li>
    <li class="chip--input">
      <input #token type="text" class="chip-input-control" placeholder="Add your skills here" 
        (keydown.enter)="!!onKeydown(token)" 
        (focus)="focus = true" 
        (blur)="focus = false">
    </li>
  </ul>
</div>

<强>组件

skillArray: string[] = [];

focus: boolean = false;

onKeydown(tokenInput: HTMLInputElement): void {
  let value = tokenInput.value;
  if (value && value.trim().length && !this.skillArray.find(x => x == value)) {
    this.skillArray.push(value);
  }
  tokenInput.value = '';
}

removeSkill(i: any) {
  this.skillArray.splice(i, 1);
}