Question

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

component.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。将:更改为=。然后，打字稿也将开始抱怨您在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" }
];

Answer 2

您尝试过此代码吗？

<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" [selected]="gender.value==userParams.gender">
      {{gender.display}}
    </option>
  </select>
</div>

Answer 3

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

您没有正确初始化性别列表您需要像这样定义它

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

在选择选项中显示值的问题

3 个答案: