data-binding – 在Angular 2中第一页加载时设置[(ngModel)]的值

我正在尝试创建一个简单的选择组件,它通过属性接收一些数据并呈现所需的选项.我打算在另一个组件的模板中使用这个select组件,比如PageComponent的模板(page.template.html).

我使用[(ngModel)]将PageComponent的变量绑定到select组件.选择一个选项后,变量get的值按预期更新,但是如何在页面加载时将其设置为指向第一个选项而不触发select组件上的手动选择？

这是代码.

在page.template.html中

<select ui-select 
        [options]="options" 
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'">
</select>
{{alertType}} <!-- To see the value while debugging -->

在page.component.ts中,PageComponent类

alertType:any;
options = [
    {id:1,value:"item-1"},{id:2,value:"item-2"},{id:3,value:"item-3"}
];

在select.component.ts中

import {Component,Input} from '@angular/core'

@Component({
  selector: '[ui-select]',template: `
    <option *ngIf="defaultValue" value="-1">{{defaultValue}}</option>
    <option *ngFor="let option of options" [value]="option.id">{{option.value}}</option>
  `
})
export class SelectComponent {
  @Input() options: any;
  @Input() defaultValue: string;
}

现在,{{alertType}}值最初不显示任何内容,只有在从选择框中选择新选项时才会更新.

我确实理解它正在发生,因为在PageComponent中默认情况下将alertType设置为undefined但我无法弄清楚如何在页面加载时将其设置为第一个选项值.

更新

最初的问题已得到解答,但我还有一个问题,这个问题更新了.

在更新的代码中,select组件从模板接受defaultValue自定义属性,并呈现条件<选项>对于该默认值.

现在,我怎么说如果设置了defaultValue,alertType应该具有该值,否则它应该具有选项列表中第一个项的值.

P.S – 如果您对构建组件所使用的方法有任何意见,请随时将它们添加到答案中,因为这将有助于我学习.

@Component({  
  selector: 'my-app',directives:[ 
    SelectComponent
  ],template : `<select ui-select
        [options]="options"
        [(ngModel)]="alertType"
        [defaultValue]="'Select an alert Type'" #mySelect>
</select>
{{alertType}}`
})
export class App implements AfterViewInit{
  @ViewChild('mySelect',{read: ViewContainerRef}) mySelect;
options = [
    {id: 1,value: "item-1",selected: false},{id: 2,value: "item-2",selected: true},//if all options will be false then defaultValue will be selected
    {id: 3,value: "item-3",selected: false}
];
alertType: any;

 ngAfterViewInit() {
    this.alertType = this.mySelect.element.nativeElement.value;
  }

}