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); 
}