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

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

在组件的html文件里：

<nz-select id="se" style="width: 13%" nzPlaceHolder="Please select" [(ngModel)]="listOfSelectedValue">
    <nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
</nz-select>
<pre>
  {{listOfSelectedValue | json}}
</pre>

在组件的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组件库)

<nz-select [(ngModel)]="selectedValue"  nzPlaceHolder="Choose" style="width:300px;">
            <nz-option id="nzoption" *ngFor="let option of selectedValueList" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
</nz-select>

在ts文件里：

export class XiayigeComponent implements OnInit {
	public selectedValue: any;
	public selectedValueList: any = [];
	//使用http
	constructor(private http: HttpClient) { }
	//生命周期函数
	ngOnInit(): void {
	//在这里进行接口请求
		this.http.get<string>(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;		
}