<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组件创建自定义组件。
答案 0 :(得分:0)
<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.