如何在角度6中使用循环选择下拉列表?

时间:2018-11-12 07:14:19

标签: angular angular6

我有一个数组作为集合,我想将其加载到下拉列表中,并且希望在某些情况下进行默认选择,但是我不知道该如何实现。

app.component.ts

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

@Component({
  selector: 'app-commingsoon',
  templateUrl: './commingsoon.component.html',
  styleUrls: ['./commingsoon.component.css']
})
export class CommingsoonComponent implements OnInit {
  public collection = [];
  constructor() {
    for(let i = 1; i<=10 ; i++) {
      this.collection.push(`Angular: ${i}`);
    }
   }

  ngOnInit() {
  }

}

app.component.html

<select name="" id="" style="position:relative; left: 100px">
    <option *ngFor="let i of collection;" value="{{i}}" [selected]="i == Angular: 2">{{ i }}</option>
</select>

我希望当i == Angular:2时选择下拉列表值

2 个答案:

答案 0 :(得分:2)

缺少行情,请尝试Object input = ... String value = null; if (input != null) { value = input.toString (); }

或者,如果您只对索引感兴趣:

String value = input != null ? input.toString () : null;

答案 1 :(得分:0)

这是使用ngModel的典型方法 如果以后要处理选定的值,这将更加方便。

<select [(ngModel)]="selectedValue">
  <option *ngFor="let option of options" [value]="option.id">
    {{option.name}}
  </option>
</select>

https://stackblitz.com/edit/angular-njs3tz