Question

如何以编程方式为模型选择以下选项中的第一个选项？

<select class="form-control" [(ngModel)]="data" name="data" (ngModelChange)="onSortChange($event)">
          <option [ngValue]="{data:'car', color: 'green'}">green car</option>
          <option [ngValue]="{data:'engine', color: 'blue'}">blue engine</option>

Answer 1

您可以使用ViewChild和本地模板变量来查看选项。

更改视图，以添加本地模板。

   <select class="form-control" [(ngModel)]="data" name="data" (ngModelChange)="onSortChange($event)">
      <option [ngValue]="{data:'car', color: 'green'}">green car</option>
      <option [ngValue]="{data:'engine', color: 'blue'}">blue engine</option>
   </select>

然后在控制器中，您可以到达选项并在要选择的属性上设置所选属性。

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    moduleId: module.id,
    templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit {
    @ViewChild('carSelect') carSelect: ElementRef;

    constructor() { }

    ngOnInit() { }

    setSelected(): void {
        this.carSelect.nativeElement.children[0].selected = true;
    }
}

选择角度2中的第一个选项

1 个答案: