Angular Material 自动完成,自动选择列表中的不同项目
Angular Material AutoComplete, Automatically choose the Distinct Item in List
我们有不同的、唯一的文档编号列表,其中没有文档编号在列表中显示两次。
我正在努力做到 Angular Material 自动选择不同的,如果它是通过复制和粘贴输入的。
目前,在使用 Ctrl-C/V 复制和粘贴后,我们使用了三个东西:OptionSelected 用于鼠标选择,OptionActivated 用于键盘选择,以及 OnBlur,因此当点击文本框外时,选项将被选择。
我很好奇 Angular Material 是否有任何更简洁的选项,或者这可能是三行代码的最佳方式吗?
<mat-form-field>
<mat-label>Document Number</mat-label>
<input type="text"
matInput
formControlName="documentNumber"
(blur)="documentNumberChangeEvent($event)"
[matAutocomplete]="auto"
>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
(optionActivated) = "documentNumberChangeEvent($event)"
(optionSelected)="documentNumberChangeEvent($event)"
>
可能更好的方法是听 FormControl valueChanges
属性:
...
@Component(...)
export class AutocompleteSimpleExample {
readonly documentNumber = new FormControl();
readonly options: string[] = ['One', 'Two', 'Three'];
constructor() {
this.documentNumber.valueChanges.subscribe(value => {
console.log(value);
});
}
}
我们有不同的、唯一的文档编号列表,其中没有文档编号在列表中显示两次。
我正在努力做到 Angular Material 自动选择不同的,如果它是通过复制和粘贴输入的。
目前,在使用 Ctrl-C/V 复制和粘贴后,我们使用了三个东西:OptionSelected 用于鼠标选择,OptionActivated 用于键盘选择,以及 OnBlur,因此当点击文本框外时,选项将被选择。
我很好奇 Angular Material 是否有任何更简洁的选项,或者这可能是三行代码的最佳方式吗?
<mat-form-field>
<mat-label>Document Number</mat-label>
<input type="text"
matInput
formControlName="documentNumber"
(blur)="documentNumberChangeEvent($event)"
[matAutocomplete]="auto"
>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
(optionActivated) = "documentNumberChangeEvent($event)"
(optionSelected)="documentNumberChangeEvent($event)"
>
可能更好的方法是听 FormControl valueChanges
属性:
...
@Component(...)
export class AutocompleteSimpleExample {
readonly documentNumber = new FormControl();
readonly options: string[] = ['One', 'Two', 'Three'];
constructor() {
this.documentNumber.valueChanges.subscribe(value => {
console.log(value);
});
}
}