簡體   English   中英

Angular mat-chips with mat-autocomplete and input組合,從列表中選擇時增加一個額外的芯片

[英]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-optioninput上的點擊:

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM