Angular ngfor selected from another array not working

Question

Sorry the title might be a bit confusing, but this is the problem.

This is the code I use.

<option #groupid
        *ngFor="let group of groups | async"
        [value]="group.id"
        [selected]="(announcement | async)?.group_id == group.id ? true : null">
  {{ group.name }}
</option>

(announcement | async)?.group_id is showing as null, but when I use it outside the ngFor, it shows the correct number.

Is that because of the ngFor?

Try using the as keyword as shown here: stackoverflow.com/questions/47729570/… — DeborahK
– DeborahK, Commented Jan 26, 2018 at 21:44

Murhaf Sousli · Accepted Answer · 2018-01-27 00:35:55Z

1

This is how you should do it

<div *ngIf="announcement | async; let announce">
  <option #groupid
          *ngFor="let group of groups | async"
          [value]="group.id"
          [selected]="announce.group_id == group.id ? true : false">
    {{ group.name }}
  </option>
</div>

answered Jan 27, 2018 at 0:35

Murhaf Sousli

13.4k22 gold badges126 silver badges192 bronze badges

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

2 Comments

udarts Over a year ago

The only issue I have with this code, is that when I want to save the value of the option I selected, I get Cannot read property 'value' of undefined error, which is related to the *ngIf, because when I remove the ngIf, the error is gone. Is there a way to use the ngIf and not getting the error?

udarts Over a year ago

Ok, so I know I can do this with concat. The problem is that I have 2 observables (from firebase), one getting items from a child with a specific key and the other getting the all items from another child. When trying to concat those, I only see the items from the specific child/key. Checking the other child (in chrome), it shows a collapsed tree item (empty name), then shows the items. Is this the reason why they won't concat?

Collectives™ on Stack Overflow

Angular ngfor selected from another array not working

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related