angular2中，select、option，设置默认选中与获得选中项id

我先写个静态的、简单的：

在组件的html文件里：

{{listOfSelectedValue | json}}

在组件的ts文件里

export class DayinComponent implements OnInit {
public listOfSelectedValue: any = 2;public listOfOption: any = [{ label: 'hehe', value: 1 },{ label: 'haha', value: 2 },{ label: 'oooo', value: 3 }];
}

简单而言，就是 [(ngModel)]绑定的值，是listOfOption里value的值（也就是listOfSelectedValue代表的值），当选中项发生改变，也就是value变了，listOfSelectedValue可以直接获取到新的value。value一般是我们的id

下面是在实例中的使用：

在angular里，引入下拉框：(我用的ng-zorro组件库)

在ts文件里：

export class XiayigeComponent implements OnInit {public selectedValue: any;public selectedValueList: any = [];//使用httpconstructor(private http: HttpClient) { }//生命周期函数ngOnInit(): void {//在这里进行接口请求this.http.get(apiUrl + '/ProjectInfo/GetProInfoSluiceSupplement',{headers: {Authorization: 'Bearer ' + this.token,},params: {Sorting: '0',MaxResultCount: '1000',}}).subscribe( (res: any) => {//这里是接口请求成功了的函数//接口返回成功的结果为：如图        我们想要的是items里的id和manage_Unit_Name，并把这两项放到新定义的selectedValueList里//注意：这里的测试的items是1，但真实数据有很多for ( let i = 0; i < res.result.items.length; i++ ) {const obj: any = {};obj.label = res.result.items[i].manage_Unit_Name;obj.value = res.result.items[i].id;this.selectedValueList.push(obj);}//让第一项默认选中（html里已经双向数据绑定了）（   这里的this.selectedValue就是选中项的id）this.selectedValue = this.selectedValueList[0].value;		
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！