-1

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?

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
udarts
  • 745
  • 1
  • 8
  • 23
  • 1
    Try using the `as` keyword as shown here: https://stackoverflow.com/questions/47729570/use-async-pipe-in-ngfor-on-observable-of-observables-angular – DeborahK Jan 26 '18 at 21:44

1 Answers1

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>
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185
  • 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 Jan 30 '18 at 07:48
  • 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? – udarts Jan 31 '18 at 11:38