自动选择下拉选项

Question

我有一个问题，我在选择区域中有一个下拉列表，问题是在加载组件时，默认情况下，选择列表中的第一个选项并显示内容，但是此内容未更新，当我们再次选择相同的选项时，它就会更新。这是我的模板。

<mat-form-field class="style-select">
            <mat-select name="structureTypes" #ctrl="ngModel" [(ngModel)]="MasStruc">
                <mat-option *ngFor="let master of masterList" (click)="onSelect($event)" [value]="master">
                    {{master}}</mat-option>
            </mat-select>
        </mat-form-field>

以下是与问题对应的两个图片：

在这里，当我打开组件时，第一次自动选择输入FWT，但是下面的列表没有更新，为了更新它，我们需要再次手动选择相同的选项。

这是一张图片：

我认为默认情况下会创建一个占位符，要求用户选择一个选项，但是如果我们在首次加载组件时还有其他方法可以自动再次选择一个选项，我想与您分享。

Answer 1

据我了解，我正在提出我的建议。我提供了两种解决方案，默认情况下选择一个值以及一个占位符。请检查它们。

HTML：

 <mat-form-field class="style-select">
   <mat-label>Select an option</mat-label>
   <mat-select name="structureTypes" #ctrl="ngModel" [(ngModel)]="MasStruc">
    <mat-option *ngFor="let master of masterList" [value]="master">
        {{master}}</mat-option>
   </mat-select>
 </mat-form-field>
 <br>
 <mat-form-field class="style-select">
   Selected by default
   <mat-select name="structureTypes" [(ngModel)]="selectedValue">
    <mat-option *ngFor="let master of masterList" [value]="master">
        {{master}}</mat-option>
    </mat-select>
 </mat-form-field>

TS：

masterList = [
   "option1",
   "option2"
];
selectedValue: string = this.masterList[1];

如果您的问题有误，请告诉我。