Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/29.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用按钮关闭下拉菜单-角度材质_Javascript_Angular_Typescript_Angular Material - Fatal编程技术网

Javascript 使用按钮关闭下拉菜单-角度材质

Javascript 使用按钮关闭下拉菜单-角度材质,javascript,angular,typescript,angular-material,Javascript,Angular,Typescript,Angular Material,我正在使用selectTo下拉列表进行角材料设计 这是我的代码: <mat-form-field id="inputClick" appearance="outline" (click)="Valid()"> <mat-label>{{'GENERAL.TITLE' | translate}} *</mat-label> <mat-select [formControl]="toppings" multiple> <div clas

我正在使用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>

{{'GENERAL.TITLE'| translate}}*
{{'GENERAL.TITLE'| translate}}*
{{item.displayName | translate}}({{item.userName}})
بعدی
انتخاب
قبلی


单击“完成”按钮后,我希望下拉列表关闭。如何实现这一点?

MatSelect
既有
打开
方法,也有
关闭
方法。您可以应用的方法很少

<mat-select #matSelect [formControl]="toppings" multiple>
   ....
   <button (click)="finish(matSelect)">Close</button>
</mat-select>
您也可以直接从HTML关闭它:

<mat-select #matSelect [formControl]="toppings" multiple>
   ....
   <button (click)="matSelect.close()">Close</button>
</mat-select>

....
接近

有关更多详细信息,请参阅API文档-

<mat-select #matSelect [formControl]="toppings" multiple>
   ....
   <button (click)="matSelect.close()">Close</button>
</mat-select>