[英]Close dropdown with button - Angular Material
I am using the selectTo dropdown in angular material design.我在 angular 材料设计中使用 selectTo 下拉菜单。
This is my code:这是我的代码:
<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>
Upon clicking the 'finish' button, I want the dropdown to close.单击“完成”按钮后,我希望关闭下拉菜单。 How can this be achieved?如何做到这一点?
MatSelect
has both open
and close
methods which you can use. MatSelect
具有您可以使用的open
和close
方法。 There are few approaches that you can apply.您可以应用的方法很少。
<mat-select #matSelect [formControl]="toppings" multiple>
....
<button (click)="finish(matSelect)">Close</button>
</mat-select>
Or if you don't want to pass matSelect
directly to finish()
method, you can reference it to ViewChild
或者如果您不想将matSelect
直接传递给finish()
方法,您可以将其引用到ViewChild
@ViewChild('matSelect') matSelect;
finish() {
this.matSelect.close();
}
You can also close it directly from HTML:您也可以直接从 HTML 关闭它:
<mat-select #matSelect [formControl]="toppings" multiple>
....
<button (click)="matSelect.close()">Close</button>
</mat-select>
For more details, take a look at the API documentation - Select |有关更多详细信息,请查看 API 文档 - Select | Angular Material Angular材料
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.