html - 在选择选项标签中显示值的问题

Question

我有一个选择选项标签来显示女性和男性。 如果我通过静态值初始化选项标签，它会起作用，但如果我使用 ngFor ，它不会显示任何值:

组件.ts:

export class MemberListComponent implements OnInit {
  user: User = JSON.parse(localStorage.getItem("user"));
  userParams: any = {};
  genderList: [
    { value: "male"; display: "Males" },
    { value: "female"; display: "Females" }
  ];
  ngOnInit() {
    this.userParams.gender = this.user.gender === "female" ? "male" : "female";
  }
}

这是模板:

<div class="form-group px-2">
    <label for="gender">Show: </label>
    <select class="form-control ml-1" style="width: 130px" id="gender" [(ngModel)]= "userParams.gender" name="gender">
    <option *ngFor= "let gender of genderList" [value] = "gender.value">
      {{gender.display}}
    </option>
  </select>
</div>

Answer 1

问题在于您对genderList 的声明。您无需初始化变量，只需声明其类型且值为 null。将 : 更改为 = 符号。然后，typscript 也会开始提示 json 对象内的 ; 。

genderList: [
  { value: "male"; display: "Males" },
  { value: "female"; display: "Females" }
];

应该是

genderList = [
  { value: "male", display: "Males" },
  { value: "female", display: "Females" }
];

或

genderList: User[] = [
  { value: "male", display: "Males" },
  { value: "female", display: "Females" }
];