Question

我正在尝试使用一个简单的选择下拉列表，该下拉列表应该选择默认选项。我尝试使用ngValue，选择，[selected] =“true”，但它们都不起作用。

<select class="form-control" [(ngModel)]="keyType"> 
<option [ngValue]="'Numeric'" selected>Numeric</option>
  <option [ngValue]="'Random'">Random</option>
</select>

最初显示为空白，但当我选择任何选项时，不再有空白选项。我不能在TS端进行更改，因为keytype总是''，除非满足某个条件。

Stackblitz链接： https://stackblitz.com/edit/angular-zhtkiv?file=src%2Fapp%2Fapp.component.html

Answer 1

Here is your blitz

您必须将ngModel的值设置为您想要选择的相应选项。

需要将空白值明确写为选项，否则一旦选择了值，它们就会消失。这不是Angular，这是HTML标准。

Answer 2

尝试使用这样的绑定，不需要选择和ngValue

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

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
    keyType: any;
    items = ['Numeric', 'Random']

    ngOnInit(){
        this.keyType = this.items[0];
    }
}

对于html

<select class="form-control" [(ngModel)]="keyType">
<option *ngFor="let i of items" [value]="i">{{i}}</option>  
</select>

{{keyType}}

Answer 3

一种方法是提供带空值的默认选项

以下是修改后的stackblitz：https://stackblitz.com/edit/angular-suxlrd?file=src/app/app.component.html

选择角度5中的默认选项

3 个答案: