问题描述
我通过引用官方的角度材料示例 mat-chip-list 与 mat-autocomplete
一起使用.io/components/chips/overview#chip-input"rel =" nofollow noreferrer> https://material.angular.io/components/chips/overview#chip-input 和 https://stackblitz.com/angular/arjnbxmepgn?file=src%2Fapp%2Fchips-autocomplete-example.html .上面示例中显示的模板是这里-
I am using mat-chip-list
along with mat-autocomplete
by referring the official angular material example https://material.angular.io/components/chips/overview#chip-input and https://stackblitz.com/angular/arjnbxmepgn?file=src%2Fapp%2Fchips-autocomplete-example.html. The same template shown in the above example is here -
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
除以下问题外,它工作正常-
It works fine except the following issue -
用户集中输入内容后, MatAutoComplete
面板会打开并显示建议.如果用户输入建议中不存在的文本,然后按"ENTER"键,则输入的文本在芯片"中可见,并打开 MatAutoComplate
面板.在这种情况下,我想停止打开 MatAutoComplete
面板.如果用户输入未知文本,则我不想打开建议面板.文字,而不是建议中的文字].在 https://stackblitz中可以看到相同的情况.com/angular/arjnbxmepgn?file = src%2Fapp%2Fchips-autocomplete-example.html .
As soon as the user focuses the input, the MatAutoComplete
panel opens with suggestions. If the user enters a text which does not exist in the suggestions and presses the "ENTER" key, the entered text is visible in a Chip and it opens the MatAutoComplate
panel. I want to stop the opening of the MatAutoComplete
panel in such a case. I do not want to open the suggestion panel if the user enters an unknown text [i.e. text other than in suggestions]. The same case can be seen in https://stackblitz.com/angular/arjnbxmepgn?file=src%2Fapp%2Fchips-autocomplete-example.html.
如果用户从建议中选择一个选项并按"ENTER"键,则 MatAutoComplete
面板不会打开.当用户在输入中输入未知文本并按"ENTER"键时,这就是我想要的情况.
If the user selects one of the options from the suggestions and presses the "ENTER" key, the MatAutoComplete
panel does not open. This is what I want in the scenario when the user enters an unknown text in the input and presses the "ENTER" key.
任何帮助将不胜感激.
推荐答案
我已将示例更新为:
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatAutocomplete, MatAutocompleteTrigger} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Chips Autocomplete
*/
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsAutocompleteExample {
visible = true;
selectable = true;
removable = true;
separatorKeysCodes: number[] = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<string[]>;
fruits: string[] = ['Lemon'];
allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
@ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
@ViewChild('auto') matAutocomplete: MatAutocomplete;
@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()) {
if(this.allFruits.indexOf(value) > -1){
this.fruits.push(value.trim());
}
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
this.autocomplete.closePanel();
}
remove(fruit: string): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
}
}
这篇关于MatAutoComplete-当在输入中输入未知文本并且"ENTER"输入时,如何停止在mat-chip-list中打开MatAutoComplete.按下键的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!