Select option dynamically in Angular 6

Question

How can I select an option dynamically in Angular 6? The page has many selects as shown:

How can I pick the value of an option dynamically if it is equal to parcela.forma_parcela?

parcela.forma_parcela = [0,1,2,3,4,5,6];

<select (change)="setBancoParcela($event.target.value, parcela)" class="input-default" name="forma_pagamento_1" id="forma_pagamento_1">
    <option value="0" [selected]="parcela.forma_parcela == this.value">Banco</option>
    <option value="1" [selected]="parcela.forma_parcela == this.value">BNDES</option>
    <option value="2" [selected]="parcela.forma_parcela == this.value">Boleto</option>
    <option value="3" [selected]="parcela.forma_parcela == this.value">Cartão de Crédito</option>
    <option value="4" [selected]="parcela.forma_parcela == this.value">Cartão de Débito</option>
    <option value="5" [selected]="parcela.forma_parcela == this.value">CH Descontado</option>
    <option value="6" [selected]="parcela.forma_parcela == this.value">Cheque</option>
    <option value="7" [selected]="parcela.forma_parcela == this.value">DDA</option>
    <option value="8" [selected]="parcela.forma_parcela == this.value">Débito Automático</option>
    <option value="9" [selected]="parcela.forma_parcela == this.value">Depósito em C/C</option>
</select>

score 8 · Answer 1 · answered Dec 12 '18 at 22:44

Correct Way to make dynamic would be :

<select id="select-type-basic" [(ngModel)]="status">
    <option *ngFor="let status_item of status_values">
    {{status_item}}
    </option>
</select>

Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.

status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];

score 4 · Answer 2 · answered Nov 29 '18 at 13:30

4

I solved this with: <option *ngFor="let forma of formas_pagamentos" value="{{forma.value}}" [selected]="forma.value == parcela.forma_parcela">{{forma.nome}}</option>

answered Nov 29 '18 at 13:30

Danillo Leão Lopes

356
1
3
11

score 0 · Answer 3 · answered Nov 28 '18 at 19:28

0

You could work with ngModel directive, and export the options from class.

answered Nov 28 '18 at 19:28

ghazi

59
1
9

I'm getting data from DB, and now i need set the correct option value to the "item(parcela)" - In the page have much selects, see the image https://i.stack.imgur.com/4qLcW.png – Danillo Leão Lopes Nov 28 '18 at 19:34
@Danillo if you have 1000 select tag, you can use ngModel it's recommended. Look at this: https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular – ghazi Nov 28 '18 at 19:45
I solved this with: – Danillo Leão Lopes Nov 29 '18 at 13:28

score 0 · Answer 4 · answered Aug 08 '19 at 17:13

Try this

 <select
       class="custom-select"
       name="ratings"
       [ngModel]="ratings.OverallRating">
       <option 
        *ngFor="let orc of ratings?.RatingChoices"
         [value]="orc.ratingChoice">
         {{orc.ratingDescription}}
       </option>
    </select>

Select option dynamically in Angular 6

4 Answers4