时间戳

首页 > 解决方案 > 如何在角度 5 的页面加载时自动填充下拉列表？

angular - 如何在角度 5 的页面加载时自动填充下拉列表？

问题描述

我是角度的新手。我想知道我们能否以角度自动填充页面加载的下拉菜单。如果是，那怎么办？谢谢你。

标签： angular

解决方案

您需要先了解组件生命周期钩子。在您的情况下，您需要一个OnInit将在组件加载时调用的钩子。

因此，您需要实现OnInit钩子并编写其方法，如以下示例代码所示-

export class SampleComponent implements OnInit {
    public dataArray = [];
    public selectedItem: any;

    constructor() { }

    ngOnInit() {
        this.dataArray = [
            { id: 1, name: 'test1' },
            { id: 2, name: 'test2' },
            { id: 3, name: 'test3' }
        ];
    }

    onDropDownChange() {
        alert(this.selectedItem);
    }
}

然后，在您的 HTML 脚本中使用它，如下所示 -

<select [(ngModel)]="selectedItem" (ngModelChange)="onDropDownChange()">
    <option [ngValue]="undefined" disabled selected>Select Item</option>
    <option *ngFor="let item of dataArray" [ngValue]="item?.id">{{item?.name}}</option>
</select>

推荐阅读