Angular 11 - 选择下拉列表中的第一项答案

【问题标题】：Angular 11 - select first item in a dropdown listAngular 11 - 选择下拉列表中的第一项
【发布时间】：2021-03-23 02:40:50
【问题描述】：

简单的事情；我希望在页面加载时自动选择下拉列表中的第一项（mat-select）。
下面的代码是我最好的猜测，但不起作用，我仍然看到一个空文本，我必须下拉并手动选择第一项。你知道为什么或如何解决它吗？谢谢。

    <mat-form-field>
        <mat-label>Title</mat-label>
        <mat-select [(ngModel)]="selectedTitle" [(value)]="titleList[0].titleval">
            <mat-option *ngFor="let singleTitle of titleList" [value]="singleTitle.titleval">
                {{singleTitle.titletxt}}
            </mat-option>
        </mat-select>
    </mat-form-field>

【问题讨论】：

我不确定，但猜测这可能有效<mat-option *ngFor="let singleTitle of titleList; let first=first" [value]="singleTitle.titleval [selected]="first">
抱歉，Markus，它对我不起作用，这也是我的第一次尝试，但我首先使用了索引。我不知道为什么 Angular 不让你这样做，或者它可能是材料库。

标签： angular angular-forms

【解决方案1】：

让 Angular 为你做这件事

在您的 TS 文件中，例如在您的 ngOnInit()

this.selectedTitle = this.titleList[0].titleval

和你的 html

<mat-form-field>
    <mat-label>Title</mat-label>
    <mat-select [(ngModel)]="selectedTitle">
        <mat-option *ngFor="let singleTitle of titleList" [value]="singleTitle.titleval">
            {{singleTitle.titletxt}}
        </mat-option>
    </mat-select>
</mat-form-field>

angular 会为你选择第一个项目

【讨论】：

完美的 Kelvin，我喜欢你的方法，因为我们还可以更好地控制选择什么或检查它是否可用等。