输入中的Angular 4 + Material Design芯片 [英] Angular 4 + Material Design chips in input

问题描述

我有可移动芯片的列表:

I have list of removable chips:

<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>

但是我需要像下面的示例一样在输入或文本区域中创建它们:

But I need to create them in input or in text area like in this example:

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

我该怎么办?

推荐答案

Material2的md-chip不如Material1成熟. Material2团队正在努力添加许多这些输入字段功能，您可以检查其

Material2's md-chip is not as mature as Material1. Material2 team is working on adding a lot of those input field features, you can check their latest example in github. Probably they will add them with beta.9 release.

因此，目前带有md-input的md-chip需要手动构建.

So, for now md-chip with md-input needs to manually constructed.

这是我可以最接近Material1的示例的示例.

Here's the example that I could get closest to the Material1's example.

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

柱塞演示

这篇关于输入中的Angular 4 + Material Design芯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！