5

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

我将 PageComponent 的变量绑定到select使用[(ngModel)]. 选择一个选项后，变量 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}}选择新选项时才会更新。select

我确实知道它正在发生，因为alertType默认情况下设置为未定义，PageComponent但我不知道如何在页面加载时将其设置为第一个选项值。

更新

原始问题已得到解答，但我对此还有一个问题，因此更新了问题。

在更新后的代码中，select组件接受defaultValue来自模板的自定义属性并呈现<option>该默认值的条件。

现在，我怎么说如果defaultValue已设置，alertType应该具有该值，否则它应该具有options列表中第一项的值。

PS - 如果您对构建组件所使用的方法有意见，请随时将它们添加到答案中，因为它将帮助我学习。

4

3 回答 3

5

因此，您希望alertType将其设置为所选值，无论它可能来自您提供的值options还是来自您的defaultValue（第一个选项）。

这可以通过使用AfterViewInit钩子来完成，

修改后的代码将是..

@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;
  }

}

我创建了一个plunker，检查一下！！

于 2016-07-08T04:35:29.340 回答
2

你可以这样尝试：

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

alertType: any = options[0].id;
于 2016-07-05T07:23:07.570 回答
0

对于您的新问题，您可以利用selectedui-select 组件中的属性：

<option *ngIf="defaultValue" selected="true" value="-1">{{defaultValue}}</option>
于 2016-07-05T07:36:28.543 回答