problem to show values in select option tage

user_12152081 0
Viewed 57

I have a select option tag to show female and male. If I init options tag by static values, it works but if I use ngFor it doesn't show any values:

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";
  }
}

and this is template:

<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>
angular html
3 Answers

The problem is your declaration of the genderList. Instead of initializing the variable, you only declare its type and the value is null. Change the : to a = sign. Then typscript will also start to complain about your ; inside the json object.

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

should be

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

or

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

have you tried this code?

<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>
user_115368940 
genderList: [
    { value: "male"; display: "Males" },
    { value: "female"; display: "Females" }
  ];

You did not initialised the gender list correctly You need to define it like

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