材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?
Posted
技术标签:
【中文标题】材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?【英文标题】:Material angular auto complete: how to remains the mat-option in the screen after selecting an option? 【发布时间】:2019-07-11 21:40:17 【问题描述】:我正在使用Material auto complete angular。
在我的mat-option
列表中选择一个选项后,我的mat-options
隐藏。选择后我需要保留选项。显示问题的 GIF:
我的html
<div class="col-xl-6 margemColunas">
<label>Anunciaremos nas contas *</label>
<input class="form-control inputContasB2W"
#inputContasB2W
[formControl]="contasB2WControl"
[matAutocomplete]="auto"
(matChipInputTokenEnd)="add($event)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, i)">
<mat-option *ngFor="let contaB2W of contasFiltradas | async" [value]="contaB2W">
contaB2W
</mat-option>
</mat-autocomplete>
</div>
<div class="col-xl-6 alinhaChips">
<mat-chip-list>
<mat-chip
*ngFor="let contaB2W of produto.contasAnunciarB2W; let j = index"
[selectable]="selected"
[removable]="removable"
(removed)="removeTag(i, j)">
contaB2W
<mat-icon matChipRemove><i class="fa fa-close"></i></mat-icon>
</mat-chip>
</mat-chip-list>
</div>
我的 ts:
constructor()
this.contasFiltradas = this.contasB2WControl.valueChanges.pipe(
startWith(null),
map((nomeConta: string | null) => nomeConta ? this._filter(nomeConta) : this.contasB2W.slice()));
private _filter(value: string): string[]
const filterValue = value.toLowerCase();
return this.contasB2W.filter(conta => conta.toLowerCase().indexOf(filterValue) === 0);
selected(event: MatAutocompleteSelectedEvent, index: number): void
this.produtosConfirmadosAnuncio[index].contasAnunciarB2W.push(event.option.viewValue);
this.inputContasB2W.nativeElement.value = '';
【问题讨论】:
停止事件传播可能会做到这一点。尝试在selected
方法中调用event.stopPropagation();
。
@GCSDC - MatAutocompleteSelectedEvent 没有 stopPropagation。该怎么做?
我想你可以使用event.preventDefault
。
【参考方案1】:
我使用了blur()
的解决方法,然后再次输入focus()
。
在ts中:
@ViewChild('inputContasB2W') autocompleteInput: ElementRef;
selected(event: MatAutocompleteSelectedEvent)
[..do your stuff...]
this.autocompleteInput.nativeElement.blur();
setTimeout(() =>
this.autocompleteInput.nativeElement.focus();
, 100
);
如果要保留输入文本,则必须将其保存在 _filter()
中并在 blur()
之前再次设置值,例如 this.contasB2WControl.setValue(this.lastFilterValue);
【讨论】:
【参考方案2】:<mat-form-field>
<input
matInput
placeholder="New fruit..."
#input
#trigger="matAutocompleteTrigger" // <-- get trigger ref
[formControl]="control"
[matAutocomplete]="auto"
/>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="selected($event)"
>
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option"
(click)="$event.stopPropagation(); trigger.openPanel()" // <-- use it here
>
option
</mat-option>
</mat-autocomplete>
</mat-form-field>
【讨论】:
这不会阻止选项面板关闭。如果您在<mat-autocomplete>
上使用 (optionSelected)
,它也不会在 Angular 12/Material 12 中重新打开它。即使没有,它也只能在第一次使用......以上是关于材料角度自动完成:选择选项后如何在屏幕中保留垫子选项?的主要内容,如果未能解决你的问题,请参考以下文章