DropDown Menu Empty - Angular-CodePudding

I have a web application in which I'm trying to add skills to candidate profiles. I have another window to add new skills. I want to be able to get the list of skills and show them on the dropdown menu. I also want to add a level of expertise (a numerical value between 1 and 5). Before adding the level, I wanted to start with adding the dropdown for skills but it is empty when I run the application.

This is what I have in my HTML file.

<mat-form-field appearance="fill">
     <mat-label>Select Skill</mat-label>
     <mat-select  [(value)]="selected">
     <mat-option *ngFor="let skill of skillNames" [value]="skill">{{skill.value}}</mat-option>
     </mat-select>
</mat-form-field>

In component.ts I added the last line of code to charge the array. skillNames is a simple empty array.

ngOnInit() {
    const candidateStreamCreator = (query) => this.candidateService.getList(query);
    this.list.hookToQuery(candidateStreamCreator).subscribe((response) => {this.candidate = response;});
    this.candidateService.getListSkillNames().subscribe((names) => this.skillNames = names);
  }

I also tried doing a console log, so I know that the array is charged with the correct values.

Here's my console log with the test data : ['C#', 'Java']

I know the problem is not on the server-side because I've tested it but I can't figure out what causes it.

CodePudding user response：

Try {{skill}} instead of {{skill.value}} in <mat-option> tag. Because of value key is not available in skillNames object as you mentioned that is a simple array ['C#', 'Java'].

Also change the skill model name into skillname

<mat-form-field appearance="fill">
     <mat-label>Select Skill</mat-label>
     <mat-select  [(value)]="selected">
     <mat-option *ngFor="let skillName of skillNames" [value]="skillName ">{{skill}}</mat-option>
     </mat-select>
</mat-form-field>

CodePudding user response：

[value]="skill" if skill is an object the value attribute doesn't accept an object

CodePudding user response：

ngOnInit() is invoked when everything in the component is initialized. You can try to set skillNames into the constructor.