javascript - Angular 7 select selected attribute option based on passed data - Stack Overflow

admin管理员组

文章数量:1404331

I am expiriencing a problem while i am trying to make a select dropdown in angular. I want to make one option selected based on the data passed with ngFor. Since I have experienced that I can not use an ngIf and an ngFor at the same time. Even though I do not understand why this is not possible I want to ask the question: "How do I make this work?" The data behind the code is working well. This has been tested. neither can i casually use JQuery to fix it with a $(document).ready();

<select *ngIf="result.Waarde.length >= 2; else other_content" (change)="onChangeSelected($event.target.value, result)" #select class="form-control">
    <option *ngFor="let waarde of result.Waarde" *ngIf="result.WaardeStr == waarde.value;" selected>
        {{waarde.value}}
    </option>
    <option *ngFor="let waarde of result.Waarde" *ngIf="result.WaardeStr != waarde.value;">
       {{waarde.value}}
    </option>
</select>

Thanks in advance.

I am expiriencing a problem while i am trying to make a select dropdown in angular. I want to make one option selected based on the data passed with ngFor. Since I have experienced that I can not use an ngIf and an ngFor at the same time. Even though I do not understand why this is not possible I want to ask the question: "How do I make this work?" The data behind the code is working well. This has been tested. neither can i casually use JQuery to fix it with a $(document).ready();

<select *ngIf="result.Waarde.length >= 2; else other_content" (change)="onChangeSelected($event.target.value, result)" #select class="form-control">
    <option *ngFor="let waarde of result.Waarde" *ngIf="result.WaardeStr == waarde.value;" selected>
        {{waarde.value}}
    </option>
    <option *ngFor="let waarde of result.Waarde" *ngIf="result.WaardeStr != waarde.value;">
       {{waarde.value}}
    </option>
</select>

Thanks in advance.

• javascript
• html
• angular
• typescript

Share Improve this question Follow asked Mar 13, 2019 at 9:19 Jeroen BerkhofJeroen Berkhof 4711 silver badge77 bronze badges 6

• i dont see what the difference is? you cant apply the selected directive to multiple <option>'s so the top one bees irrelevant – mast3rd3mon Commented Mar 13, 2019 at 9:23
• No option is added if the ngIf would return something else then expected. So 1 will be added each tiem. correct me if i'm wrong. – Jeroen Berkhof Commented Mar 13, 2019 at 9:26
• 1 the *ngFor will effectively "duplicate" whatever it is on, meaning you will have x amount of <option>'s all with selected on, if the top condition is met – mast3rd3mon Commented Mar 13, 2019 at 9:29
• the closest thing you could do that should work, is create a filter pipe for the *ngFor and filter it instead of using the *ngIf – mast3rd3mon Commented Mar 13, 2019 at 9:32
• 2 at this risk of attracting hate, I would like to add to OP that your question and selected answer are in plete mismatch. Your questions asks about attribute selected not about the workings and getting the value of selected option. No offence to submitter of answer: Hardik Patel. – Pushkar Adhikari Commented Mar 13, 2019 at 9:37

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

Use ngModel as below.

<select *ngIf="result.Waarde.length >= 2; else other_content" [(ngModel)]="result.WaardeStr" (change)="onChangeSelected($event.target.value, result)" #select class="form-control">
    <option *ngFor="let waarde of result.Waarde" [value]="waarde.value">
       {{waarde.value}}
    </option>
</select>

Place the condition on the selected attribute :

<select *ngIf="result.Waarde.length >= 2; else other_content" (change)="onChangeSelected($event.target.value, result)" #select class="form-control">
    <option *ngFor="let waarde of result.Waarde" [attr.selected]="result.WaardeStr == waarde.value">
        {{waarde.value}}
    </option>
</select>

<select *ngIf="result.Waarde.length >= 2; else other_content" (change)="onChangeSelected($event.target.value, result)" #select class="form-control">
<option *ngFor="let waarde of result.Waarde" [attr.selected]="result.WaardeStr == waarde.value">
    {{waarde.value}}
</option>

We have add value attribute then not working selected !!!!!!!!

本文标签： javascriptAngular 7 select selected attribute option based on passed dataStack Overflow