时间戳

首页 > 解决方案 > 角度预选选择选项

angular - 角度预选选择选项

问题描述

在加载组件时，我需要使用变量的值预先填充选项下拉菜单的第一个值。（这个值来自一个数据库，但为了简化我手动填充的所有内容。）这些选项是ngFor通过一个数组循环动态加载的。我希望第一个选项是firstColor.

这是带有代码示例的stackbliz。

零件：

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  firstCar: String = "";
  colors: any[] = [];
  firstColor: any[] = [];
  ngOnInit() {
    this.firstCar = "audi";

    this.firstColor = [
      {
        name: "bianco",
        code: "#ffffff"
      }
    ];

    this.colors = [
      {
        name: "rosso",
        code: "#ff0000"
      },
      {
        name: "bianco",
        code: "#ffffff"
      },
      {
        name: "nero",
        code: "#000000"
      }
    ];
  }
}

模板

<h1>primo esempio</h1>
<label for="cars">Choose a car: </label>

<select name="cars" id="cars">
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="mercedes">mercedes</option>
  <option value="audi">audi</option>
</select>

<h1>secondo esempio</h1>
<label for="cars">Choose a color: </label>

<select name="colors" id="colors">
  <option *ngFor="let c of colors" [ngValue]="c">
    {{c.code}}
  </option>
</select>

标签： angularselectoption

解决方案

<select name="colors" id="colors">
  <option *ngFor="let color of colors" [selected]="color['name'] === this.firstColor[0]['name']" >
    {{color['code']}}
  </option>
</select>

推荐阅读