javascript - Select option with ngModel - Stack Overflow

admin管理员组

文章数量:1400336

I have a project that has a select of several questions and I would like the first one to appear by default.

I have seen an example of how to achieve this using the index, of the type:

<select>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {{answer.name}}
 </option> 
</select>

and it works, but when I want to bind the select to a property of the ponent, it is no longer selected:

<select  [(ngModel)]=searchterms.answerId>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {‌{answer.name}}
 </option> 
</select>

You can see an example here:

As say in some answers the solution is to set a default value to the serachterm, but the problem I have, (I am not able to reproduce it in the playground) is that I receive those answers from a service that asks to a back, and when the ponent is built it still does not have them and it gives me an error .... how can I make it assign those searchterms the value once they exist in the service?

I have a project that has a select of several questions and I would like the first one to appear by default.

I have seen an example of how to achieve this using the index, of the type:

<select>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {{answer.name}}
 </option> 
</select>

and it works, but when I want to bind the select to a property of the ponent, it is no longer selected:

<select  [(ngModel)]=searchterms.answerId>
 <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
  {‌{answer.name}}
 </option> 
</select>

You can see an example here:

https://stackblitz./edit/angular-rv9vqi

As say in some answers the solution is to set a default value to the serachterm, but the problem I have, (I am not able to reproduce it in the playground) is that I receive those answers from a service that asks to a back, and when the ponent is built it still does not have them and it gives me an error .... how can I make it assign those searchterms the value once they exist in the service?

• javascript
• html
• angular
• angular-ngmodel
• angular2-ngmodel

Share Improve this question Follow edited Dec 10, 2019 at 10:26 Ulises 2010 asked Dec 5, 2019 at 16:52 Ulises 2010Ulises 2010 50822 gold badges66 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can use Angulars two-way data binding to bind to the value attribute of the <select> element. In your example it would look like this:

<select [(value)]="searchterms.answerId">  
    <option *ngFor="let answer of answers" [value]="answer.id">{{answer.name}}</option>  
</select>

Notice how binding to the value attribute cleans up the option element, by enabling you to remove the [selected]="i == 2" and let i = index

However, like the others have mentioned you will want to initialize the desired default value in your ponent code.

Here is the working StackBlitz Demo with your code

You need to set the searchterms.answerId with a proper default value. In your case

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  answers = [
    {name: "Answer 1", id: '1'},
    {name: "Answer 2", id: '2'},
    {name: "Answer 3", id: '3'},
    {name: "Answer 4", id: '4'},
  ];
  searchterms = {
    answerId: this.answers[1].id //Set the default value properly
  };
}

stackblitz

Then you should bind searchterms in your ponent.

you can do it inside constructor as follows.

this.searchterms.answerId = this.answers[1].id;

Demo

本文标签： javascriptSelect option with ngModelStack Overflow