javascript - 无法在 mat-select 中更新 inputCtrlState 的值

Question

<mat-select #autoType="matSelect" tabindex="-1" [(ngModel)]="multipleSelect"  multiple  [placeholder]="placeholderText"  title="{{getToolTipDEata()}}" (selectionChange)="onMultiSelectionEvent($event)">
          <div class="box-search">
            <input  #autofocus matInput [placeholder]="placeholderText" [(ngModel)]="inputCtrlState"  [matAutocomplete]="autoType"  (keydown)="keyDownElement($event)"  (keyup)="dynamicOnKeyUp($event)" (focus)="onFocus(val.partnerName==undefined?val:val.partnerName)" [disabled]="fieldDisabled" >
            <button mat-button  *ngIf="inputCtrlState && !fieldDisabled" matSuffix mat-icon-button aria-label="Clear" (click)="clearAutoCompleteTxt()">
              <mat-icon>close</mat-icon>
            </button>
            <mat-autocomplete  #autoType="matAutocomplete" [displayWith]="displayFn">

            </mat-autocomplete>
          </div>
          <mat-select-trigger>
            {{multipleSelect.length>0  ? multipleSelect[0]['desc'] : ''}}
              <span *ngIf="multipleSelect?.length > 1" class="example-additional-selection">
                (+{{multipleSelect.length - 1}} {{multipleSelect.length > 2 ? 'other' : 'others'}})
              </span>
            <!--MLT-->
          </mat-select-trigger>
          <mat-option style="display: none;">
            Search Results
          </mat-option>
          <mat-option  *ngFor="let dropdownValue of _localServicedData" [value]="dropdownValue" >
            {{dropdownValue.desc}}
          </mat-option>
        </mat-select>

clearAutoCompleteTxt(){   
    this.inputCtrlState=''
}

此函数在同一组件中定义，但值未更新。我正在尝试使用现有的 mat-select 组件创建自定义组件。

标签： javascriptangular

Answer 1

<mat-select style="overflow: hidden" #autoType="matSelect" tabindex="-1" [(ngModel)]="multipleSelect"  multiple
                [placeholder]="placeholderText"  title="{{getToolTipDEata()}}" (selectionChange)="onMultiSelectionEvent($event)">
      <mat-select-trigger>
      {{multipleSelect.length>0  ? multipleSelect[0]['desc'] : ''}}
      <span *ngIf="multipleSelect?.length > 1" class="example-additional-selection">
      (+{{multipleSelect.length - 1}} {{multipleSelect.length > 2 ? 'other' : 'others'}})
      </span>     
      </mat-select-trigger>
      <div class="box-search">
        <input name="mytemp"  #mytemp="ngModel" #autofocus matInput [placeholder]="placeholderText" (blur)="onBlur()"
               [(ngModel)]="inputCtrlState"
               [matAutocomplete]="autoType"
               (keydown)="keyDownElement($event)"
               (keyup)="dynamicOnKeyUp($event)"
               (focus)="dynamicOnKeyUp($event)"
               (focus)="onFocus(val.partnerName==undefined?val:val.partnerName)"
               [disabled]="fieldDisabled" >
        <button mat-button  *ngIf="inputCtrlState && !fieldDisabled" matSuffix mat-icon-button aria-label="Clear" (click)="clearAutoCompleteTxt()">
          <mat-icon>clear</mat-icon>
        </button>
        <mat-autocomplete  #autoType="matAutocomplete" [displayWith]="displayFn">

        </mat-autocomplete>

      </div>
      <div style="overflow-y: auto; max-height:200px">
      <mat-option style="display: none;">
        Search Results
      </mat-option>
      <mat-option  *ngFor="let dropdownValue of _localServicedData" [value]="dropdownValue" >
        {{dropdownValue.desc}}
      </mat-option>
      </div>
    </mat-select>

I found one solution, onBlur i am clearing the inputctrl value.