角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