我有一个选择或下拉,这将被加载时,用户单击向下箭头第一次。当数据正在加载时,我们希望显示旋转或加载文本。
这是代码
<mat-form-field appearance="outline"> <mat-label>Cohort</mat-label> <mat-select disableRipple formControlName="form" (opened)="getData()"> <div *ngIf="isLoading"><mat-spinner></mat-spinner></div> <mat-option *ngFor="let c of names" value={{c.id}}>{{c.name}}</mat-option> </mat-select> </mat-form-field> isLoading: boolean; names: any; getData(){ if(this.names== null) this.isLoading = true; this.Service.getAll() .subscribe({ next:(res)=>{ this.names= res; error:()=>{ alert("Error while getting") this.isLoading = false; }
发布于 2022-04-28 14:27:36
如果您使用(单击)而不是(打开),它将做您想做的事情。
所以结果应该是
<mat-form-field appearance="outline"> <mat-label>Cohort</mat-label> <mat-select disableRipple formControlName="form" (click)="getData()"> <div *ngIf="isLoading"><mat-spinner></mat-spinner></div> <mat-option *ngFor="let c of names" value={{c.id}}>{{c.name}}</mat-option> </mat-select> </mat-form-field> isLoading: boolean; names: any; getData(){ if(this.names== null) this.isLoading = true; this.Service.getAll() .subscribe({ next:(res)=>{ this.names= res; error:()=>{