如何在angular(4)中设置默认值？

Question

下面是 html 代码帮助我是否能够在下拉列表中显示值。

  <div class="field">
            <select class="ui dropdown" name="gender" ngModel>
              <option *ngFor="let gender of genderList">{{gender}}</option>
            </select>
  </div>

这是控制器的代码 class。

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

@Component({
  selector: 'app-add-member',
  templateUrl: './add-member.component.html'
})
export class AddMemberComponent implements OnInit {
    genderList: string[];

  constructor() {
    this.genderList=["Male","Female"];
  }

  ngOnInit() {
  }

  onSubmit(form: any): void{
    console.log('Form value = ', form);
  }

}

如何将初始默认值设置为下拉列表？我还想知道在下拉列表中显示值的方式是否正确？

谢谢

Answer 1

您必须使用 ngModel 并在控制器中设置属性 class

HTML:

<div class="field">
  <select class="ui dropdown" name="gender" [(ngModel)]="selectGender">
          <option *ngFor="let gender of genderList">{{gender}}</option>
    </select>
 </div>

Component.ts:

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

@Component({
selector: 'app-add-member',
templateUrl: './add-member.component.html'
})

export class AddMemberComponent implements OnInit {
genderList: string[];
selectGender: string;

constructor() {
this.genderList=["Male","Female"];
this.selectGender= this.genderList[0];
}

ngOnInit() {
}

onSubmit(form: any): void{
console.log('Form value = ', form);
}

}

如何在angular(4)中设置默认值？

How to set default value in angular(4)?

semantic-ui

angular-directive

angular