Angular4 Material chipset+autocomplete

Question

我正在使用angular 4的芯片组和自动补全功能开发像stackoverflow中的标签系统这样的功能。

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

以下是在TS文件中:选项基本上是从哪里自动完成将选择。

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = [];

add(event: MatChipInputEvent): void {
      let input = event.input;
      let value = event.value;

      // Add our item
      if ((value || '').trim()) {
        this.displayItems.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }
    }

    remove(item: any): void {
      let index = this.displayItems.indexOf(item);

      if (index >= 0) {
        this.displayItems.splice(index, 1);
      }
    }

Answer 1

您可以在"mat-autocomplete“中使用@Output (optionSelected)并推送新项目。

snacksType: String[];

  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  options=['banana','apple','jackfruit','mango', 'grapes', 'kiwi'];
  // Enter, comma
  separatorKeysCodes = [ENTER, COMMA];

  displayItems = [];

add(event: MatChipInputEvent): void {
      let input = event.input;
      let value = event.value;

      // Add our item
      if ((value || '').trim()) {
        this.displayItems.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }
    }

    remove(item: any): void {
      let index = this.displayItems.indexOf(item);

      if (index >= 0) {
        this.displayItems.splice(index, 1);
      }
    }

public addSelect(event) {
    let option = event.option;
    let value = option.value;
    if ((value || '').trim()) {
      this.fruits.push({ name: value.trim() });
    }
}

在你的mat-autocomplete中添加(optionSelected)="addSelect($event)“

<mat-form-field class="col-md-4 col-md-offset-2">
                  <mat-chip-list #chipList>
                    <mat-chip *ngFor="let item of displayItems" [selectable]="selectable"
                             [removable]="removable" (remove)="remove(item)">
                      {{item}}
                      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="Enter Items..."  
                           [matChipInputFor]="chipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="addOnBlur"
                           (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>

                           <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addSelect($event)">
                                <mat-option *ngFor="let option of options" [value]="option">
                                    {{ option }}
                                </mat-option>
                            </mat-autocomplete>

                  </mat-chip-list>
                  <mat-hint align="end">Press comma or enter after each selection</mat-hint>
                </mat-form-field>

Answer 2

它不起作用，因为您没有在我们的输入上添加任何控件来检测值更改

<input placeholder="Enter Items..."  
                       [formControl]="displayCtrl"
                       [matChipInputFor]="chipList"
                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                       [matChipInputAddOnBlur]="addOnBlur"
                       (matChipInputTokenEnd)="add($event)" matInput  [matAutocomplete]="auto"/>