我试图创建一个简单的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}}
值最初没有显示任何内容,只有在从select
框中选择新选项时才会更新。
我确实理解它正在发生,因为alertType
在PageComponent
中默认设置为未定义,但我不知道如何在页面加载时将其设置为第一个选项值。
原来的问题已经回答了,但我还有一个问题,所以更新了这个问题。
在更新后的代码中,select
组件从模板中接受defaultValue
自定义属性,并为该默认值呈现有条件的<option>
。
现在,我怎么说,如果defaultValue
被设置,alertType
应该有这个值,否则它应该有options
列表中第一项的值。
P。S -如果您对构建组件的方法有任何评论,请随时将它们添加到答案中,因为它将帮助我学习。
标题>所以你想要的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;
}
}
我已经创建了一个活塞,检查这个!!
您可以这样尝试:
options = [
{id:1, value:"item-1"},
{id:2, value:"item-2"},
{id:3, value:"item-3"}
];
alertType: any = options[0].id;
对于您的新问题,您可以利用ui-select组件中的selected
属性:
<option *ngIf="defaultValue" selected="true" value="-1">{{defaultValue}}</option>