Angular4 Материал чипсета + автозаполнение

Question

Я разрабатывал такую ​​функциональность, как система тегов в stackru, используя набор микросхем Angular 4 и функции автозаполнения. Вот кусок кода, который я написал. Это не работает

<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

Вы можете использовать @Output (optionSelected) в "mat-autocomplete" и нажать новый элемент.

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

В вашем мате автозаполнения add (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"/>