[英]Close dropdown with button - Angular Material
我在 angular 材料設計中使用 selectTo 下拉菜單。
這是我的代碼:
<mat-form-field id="inputClick" appearance="outline" (click)="Valid()">
<mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
<mat-select [formControl]="toppings" multiple>
<div class="drpInput">
<mat-form-field class="mat-form-field-fluid" appearance="outline">
<mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label>
<input autocomplete="off" matInput [placeholder]="'GENERAL.TITLE' | translate"
(keyup)="onTextChange($event.target.value)">
</mat-form-field>
</div>
<div class="oprionSelect">
<mat-option (click)="selectedUser(item.id)" *ngFor="let item of users" [value]="item.id">
<label>{{ item.displayName | translate }} </label><span class="mar">({{item.userName}})</span>
</mat-option>
</div>
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<div class="row justofy-content-center text-center m-auto col-md-12 col-sm-12 col-lg-12 col-xl-12 col-lg12">
<div class="col-md-4 col-sm-4 col-lg-4 col-xl-4 col-lg-4 right">
<button mat-button color="primary" (click)="next()" *ngIf="nextBtn">بعدی</button>
</div>
<div class="col-md-4 col-sm-4 col-lg-4 col-xl-4 col-lg-4" *ngIf="count!=0">
<button mat-button (click)="close()" color="warn">انتخاب</button>
</div>
<div class="col-md-4 col-sm-4 col-lg-4 col-xl-4 col-lg-4 left">
<button mat-button color="accent" (click)="prev()" *ngIf="prevBtn">قبلی</button>
</div>
</div>
</mat-select>
單擊“完成”按鈕后,我希望關閉下拉菜單。 如何做到這一點?
MatSelect
具有您可以使用的open
和close
方法。 您可以應用的方法很少。
<mat-select #matSelect [formControl]="toppings" multiple>
....
<button (click)="finish(matSelect)">Close</button>
</mat-select>
或者如果您不想將matSelect
直接傳遞給finish()
方法,您可以將其引用到ViewChild
@ViewChild('matSelect') matSelect;
finish() {
this.matSelect.close();
}
您也可以直接從 HTML 關閉它:
<mat-select #matSelect [formControl]="toppings" multiple>
....
<button (click)="matSelect.close()">Close</button>
</mat-select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.