Angular4 Material 芯片组+自动完成

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

在ma​​t-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>