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

Posted 2023-02-23

【中文标题】在 Angular 2 中加载第一页时设置 [(ngModel)] 的值

【英文标题】：Setting value of [(ngModel)] upon first page load in Angular 2

【发布时间】：2016-11-06 22:33:06

【问题描述】：

我正在尝试创建一个简单的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 - 如果您有关于构建组件的方法的 cmets，请随时将它们添加到答案中，因为这将有助于我学习。

【问题讨论】：

"如果设置了 defaultValue" - 从哪里设置？以编程方式还是通过选择元素？

从page.template.html 中的select 框中设置为自定义属性。上面是[defaultValue]="'Select an alert Type'"

【参考方案1】：

因此，您希望将 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，检查一下！！

【参考方案2】：

你可以这样尝试：

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

alertType: any = options[0].id;

【讨论】：

该死！这太简单了，我正在环游世界，想着什么不是。 ：/我实际上还有其他问题，所以让我更新 OP。

【参考方案3】：

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

<option *ngIf="defaultValue" selected="true" value="-1">defaultValue</option>

【讨论】：

是否也将PageComponent中alertType变量的初始值设置为选择框的[(ngModel)]？

我试过了，但在我实际选择一个选项之前它不会设置alertType 的值