在角度下拉列表中预选一个值

在 Web 开发中，使用下拉列表是常见的用户交互形式。用户可以从列表中选择一个选项。 在某些情况下，我们需要在渲染页面时将下拉列表预选一个值。本篇文章将介绍如何在角度 (Angular) 中预选下拉列表中的值。

HTML 代码

首先，让我们来看一下 HTML 模板代码。在下拉列表中，我们可以使用 select 和 option 标签来定义。在 Angular 中，我们通常会将下拉列表的选项和值绑定到组件的属性上。

<select [(ngModel)]="selectedItem">
    <option *ngFor="let item of items" [value]="item">{{item}}</option>
</select>

在上面的代码中，selectedItem 是组件中存储当前选定项目的属性。 items 数组包含选项的列表。

在 Angular 中预选值

让我们假设现在我们需要在页面上将下拉列表预选第三个选项。我们可以通过在组件类中设置 selectedItem 的值来实现此目的。

export class MyComponent {
    items = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
    selectedItem = this.items[2]; // 预选第三个选项
}

我们将组件类的 selectedItem 属性设置为 items 数组中的第三个元素。由于使用了双向数据绑定 [(ngModel)]，因此此预选值将自动在 HTML 模板中呈现为当前选定的项目。

例如，上面的 HTML 代码将在下拉列表中显示“Option 3”作为默认选项。

结论

在本篇文章中，我们探讨了如何在 Angular 中预选下拉列表中的值。 我们使用 [(ngModel)] 双向数据绑定将下拉列表的任何更改映射回组件并呈现预选值。