Angular 角度4+材料设计芯片输入
我有可移动芯片列表:Angular 角度4+材料设计芯片输入,angular,angular-material2,Angular,Angular Material2,我有可移动芯片列表: <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> 但我需要在输入或文本区
<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>
但我需要在输入或文本区域中创建它们,如本例所示:
我该怎么做呢?Material2的md芯片没有Material1成熟。Material2团队正在添加许多输入字段功能,您可以检查它们的属性。他们可能会在beta.9版本中添加它们
因此,目前需要手动构造带有md输入的md芯片
这是一个我可以最接近Material1示例的示例
html:
ts:
非常感谢您对beta 9的支持yes=>
<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>
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();
}
}
}