![](/img/trans.png)
[英]Angular material reusable mat-chip-list with mat-autocomplete
[英]Angular mat-chips with mat-autocomplete and input combined, adds an extra chip when selecting from list
我已經結合了 mat-chips 自動完成和輸入(因為兩者都出現在文檔的示例部分中),但是當我輸入部分自動完成選項來過濾選項時,它會產生一個問題,然后單擊它,它會添加輸入值加上點擊的項目到芯片列表。 這對它來說可能是一件非常合乎邏輯的事情,因為我看不出有任何理由為什么它應該在單擊項目時忽略模糊事件,是否有內置的方法/破解來解決這個問題? 這是我的代碼:
<mat-form-field class="chip-list">
<mat-chip-list #chipList aria-label="Op selection" class="mat-chip-list-stacked">
<mat-basic-chip *ngFor="let sop of selectedOps" [selectable]="selectable"
[removable]="removable" (removed)="remove(sop)">
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
{{sop.val}}
</mat-basic-chip>
</mat-chip-list>
<div style="position: relative;">
<input matInput [formControl]="chipControl" aria-label="subcats" #SelectInput
[matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)" [matChipInputAddOnBlur]="addOnBlur">
<mat-icon class="icon" (click)="SelectInput.focus()">keyboard_arrow_down</mat-icon>
</div>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let op of filteredOps | async" [value]="op">
<div (click)="optionClicked($event, op)">
<mat-checkbox [checked]="op.selected" (change)="toggleSelection(op)"
(click)="$event.stopPropagation(); ">
{{ op.val }}
</mat-checkbox>
</div>
</mat-option>
</mat-autocomplete>
</mat-form-field>
我做錯了什么嗎? 還是一開始就不應該一起工作? 感謝您的任何反饋!
這是@ https://github.com/angular/components/issues/19279#issuecomment-627263513發布的解決方案
從那里引用:
我們可以模擬 matChipInputAddOnBlur 自己。
我在輸入中添加了 (blur)=addOnBlur($event) 並禁用了 matChipInputAddOnBlur。 點擊 mat-input 應該被忽略。
我的實現:
addOnBlur(event: FocusEvent) {
const target: HTMLElement = event.relatedTarget as HTMLElement;
if (!target || target.tagName !== 'MAT-OPTION') {
const matChipEvent: MatChipInputEvent = {input: this.fruitInput.nativeElement, value : this.fruitInput.nativeElement.value};
this.add(matChipEvent);
}
}
示例https://stackblitz.com/edit/angular-rd38q1-jxbjjb?file=src%2Fapp%2Fchips-autocomplete-example.ts
我將在這里留下另一個解決方案。
主要問題是模糊在不同瀏覽器上的工作方式略有不同,因此外部點擊的偵聽器會忽略mat-option
和input
上的點擊:
constructor(private eRef: ElementRef, @Inject(DOCUMENT) private _document: Document) {
this.listenOutsideClick();
}
private listenOutsideClick(): void {
fromEvent(this._document, 'click', { passive: false }).pipe(takeUntil(this.isDestroyed$))subscribe((event) => {
const inside = this.eRef.nativeElement.contains(event.target);
const clickOnOption = (event.target as HTMLElement).tagName === 'MAT-OPTION';
if (clickOnOption || inside) {
// clicked inside;
} else {
// clicked outside
if (this.chipsInput.nativeElement.value) {
this.add({
input: this.chipsInput.nativeElement,
value: this.chipsInput.nativeElement.value
} as MatChipInputEvent
);
}
}
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.