当只有一个选项时，Angular 会自动选择 Mat-Select答案

【问题标题】：Angular automatically select the Mat-Select when there is only one option当只有一个选项时，Angular 会自动选择 Mat-Select
【发布时间】：2019-05-30 13:23:04
【问题描述】：

如果 mat-select 中有一个选项，我需要设置默认值。否则留黑色由用户选择。这是我的 HTML 代码

<mat-form-field>
<mat-select (selectionChange)="CompartSelected($event, element, cmpart)" disableRipple [value]="element.Compart.Id" name="cmpart" >
  <mat-option *ngIf="getAvailableCompartList(element.Compart.CompartType.Id).length > 1" value="">-- Please Select an Option --</mat-option>
  <mat-option *ngFor="let cmpart of getAvailableCompartList(element.Compart.CompartType.Id)" title="{{Translate(cmpart.CompartNote)}}" 
      [value]="cmpart.Id">{{cmpart.CompartTitle}}
  </mat-option>

根据@Sean 解决方案，我已经更新了代码。但它不会将值设置为 mat-select。我附上了这些垫子选择的一些图片。

【问题讨论】：

标签： javascript arrays angular select angular6

【解决方案1】：

编辑：对不起 - 误解了。您希望在只有一个选项（默认行为）时选择该值，否则当有 2 个以上选项可用时留空。仅当 ngFor 表达式返回超过 1 个项目时，才在 ngFor 之外添加额外的 mat-option。

<mat-form-field>
    <mat-select (selectionChange)="CompartSelected($event, element, cmpart)" disableRipple [value]="element.Compart.Id" name="cmpart" >
      <mat-option *ngIf="getAvailableCompartList(element.Compart.CompartType.Id).length > 1" value="">-- Please Select an Option --</mat-option>
      <mat-option *ngFor="let cmpart of getAvailableCompartList(element.Compart.CompartType.Id)" title="{{Translate(cmpart.CompartNote)}}" 
          [value]="cmpart.Id">{{cmpart.CompartTitle}}
      </mat-option>
   </mat-select>
</mat-form-field>

您可以通过在组件内调用getAvailableCompartList 来稍微清理一下，这样您就不会在模板渲染时对函数进行两次评估。

【讨论】：

我已经使用了这个解决方案。但它没有将值设置为 mat-select。
谢谢@sean，我已经解决了那个问题。但它不会触发我在 mat-select 中的 (selectionChange) 事件
@hash，你说你已经解决了这个问题。请您发布您的解决方案并接受它作为答案吗？

【解决方案2】：

以防有人仍在寻找提示。通常，当您的选择改变大小时，意味着它来自可观察的。所以你可以这样做：

打字稿代码：

//HERE IS THE FUNCTION THAT LOADS YOUR OPTIONS. IN THIS CASE 'val' IS MY API RETURN.
//IN CASE SIZE IS 1, PASS THE FIRST VALUE TO YOUR VARIABLE MODEL.

        loadParameter(){
                this.service.getParameters().subscribe((val: any) => {             
                  this.parameters = val; 
                  if (val.length == 1) {
                    this.selectedParameter = val[0].ParameterId;
                  }
                });
    }

----------------------------------------------------------------------------
Here the front code:
     
            <mat-label>Example</mat-label>
            <mat-select [(ngModel)]="selectedParameter">
                <mat-option *ngFor="let parameter of parameters" [value]="parameter.ParameterId">{{parameter.ParameterValue}}</mat-option>
            </mat-select>    
------------------------------------------------------------------------

【讨论】：