角4个输入+材料设计芯片

Question

我有一个可拆卸的芯片列表：

<md-chip-list> 
    <md-chip *ngFor="let chip of chips; let i = index" 
      color="accent"> 
    {{chip}} 
    <i class="fa fa-close" (click)="remove(i)"></i> 
    </md-chip> 
</md-chip-list> 

但我需要输入或文本区创建它们就像这个例子：

https://material.angularjs.org/latest/demo/chips

我该怎么做？

Answer 1

材质2的md-chip不如材质1成熟。 Material2团队正在努力增加许多这些输入字段功能，您可以检查他们的latest example in github。可能他们会添加beta.9版本。

所以，现在md-chip与md-input需要手动构建。

下面是我可以最接近Material1示例的示例。

HTML：

<md-input-container floatPlaceholder="never"> 
    <md-chip-list mdPrefix> 
    <md-chip *ngFor="let chip of chips; let i = index" 
      color="accent"> 
     {{chip}} 
     <i class="fa fa-close" (click)="remove(i)"></i> 
    </md-chip> 
    </md-chip-list> 
    <input mdInput [mdDatepicker]="picker" 
     placeholder="Enter fruit" 
     [(ngModel)]="chipValue" 
     #chip 
     (keydown.enter)="add(chip.value)" 
     (keydown.backspace)="removeByKey(chip.value)"> 
</md-input-container> 

TS：

chipValue: string; 

    chips = [ 
    'Apple', 
    'Orange', 
    'Banana', 
    'Mango', 
    'Cherry' 
] 

remove(item){ 
    this.chips.splice(item, 1); 
} 

add(value){ 
    this.chips.push(value); 
    this.chipValue = ""; 
} 

removeByKey(value){ 
    if(value.length < 1){ 
    if(this.chips.length > 0){ 
     this.chips.pop(); 
    } 
    } 
} 

Plunker demo