Array with select option in Angular and Typescript

Question

I display 51 questions with their related answers on a page. Both information come from one web-service call.

<tbody>
   <tr *ngFor="let QuestionOption of questions; trackBy: trackQuestionById; let i = index;">
   <th scope="row">{{QuestionOption.id}}</th>
   <td>{{QuestionOption.name}} {{QuestionOption.description}}
    </p>
     <select  class="form-control"  name="selectAnswer" [(ngModel)]="answer[i]">
     <option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
    </p>
   </td>
</tr>
</tbody>

on the typescript code I try the following:

answer: Answer[];
this.answer = new Array<Answer>();

The type Answer has multiple fields like: Id, Name, Score, Description

What is not working is that I always have get the Id into the answer[i] but I want to have the id in the field answer[i].id

If i change the

[(ngModel)]="answer[i]"

into

[(ngModel)]="answer[i].id"

I get the following exception: ERROR TypeError: "_co.caaAnswer[_v.context.index] is undefined"

I also tried:

[(ngModel)]="answer[i]?.id"

So is it correct to use answer[i] ? and then in the option I should somehow assign to answer[i].id the selected value. If so somebody can help how to do it.

Any help is appreciated! Thanks a lot. augeres

As an additional information it is important to say that the display works fine. It is just the saving of the information which does not work. — augeres
– augeres, Commented Apr 3, 2019 at 10:23
@ArunKumarMN as I have 51 questions and next to it I have the related answers. Each question has a potential individual set of answers. — augeres
– augeres, Commented Apr 3, 2019 at 11:32

augeres · Accepted Answer · 2019-04-07 18:36:52Z

4

I found the solution. The problem was that the compareWith function did not work properly because of the Array. It only works in case you name the html select based upon the array index:

Working version:

<select class="form-control" id="field_answer{{i}}" name="field_answer{{i}}" [(ngModel)]="resultAnswer[i].answer" [compareWith]="compareFn">
<option [ngValue]="answer" *ngFor="let answer of Question.answers; trackBy: trackAnswerById">{{answer.id}} {{answer.description}}</option>
</select>

answered Apr 7, 2019 at 18:36

augeres

711 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fahad Subzwari · Accepted Answer · 2019-04-03 10:31:17Z

0

You have to push into answer on select change like this

<select  class="form-control"  name="selectAnswer" [(ngModel)]="selectedAnswerId" (change)="setAnswer(i)">
 <option *ngFor="let answers of QuestionOption.Answers" [ngValue]="answers.id">{{answers.description}}</option>
<select>

in component.ts

selectedAnswerId : number;
setAnswer(index){
  this.answer[index].push({id : this.selectedAnswerId})
}

answered Apr 3, 2019 at 10:31

Fahad Subzwari

2,3853 gold badges31 silver badges63 bronze badges

1 Comment

augeres Over a year ago

I changed it to this: this.caaAnswers[index] = { id : this.selectedAnswerId[index] }; and in the component: [(ngModel)]="selectedAnswer[i] As I have a set of questions and potential answers. But your code works fine!!! Thank you

Collectives™ on Stack Overflow

Array with select option in Angular and Typescript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related