Angular: ngIf not working for object.property

Question

I'm sure I'm in for a :facepalm here, but this seems to have stopped behaving as expected in my upgrade from Angular 7 to 9.

I want to conditionally show a property (car.type) if it's not an empty string:

<select class="form-control" [(ngModel)]="selections.modelId">
  <option *ngFor="let car of selections.possibleCars" [value]="car.modelId" >
    <span *ngIf="car?.type">{{car.type}} - </span>{{ car.modelName }}
  </option>
</select>

This used to work to show car.type (e.g. "Truck"), but not anymore. If I remove the *ngIf clause, I get the value of car.type, and it's a non-zero-length string.

The strange thing is that it's showing in the markup, but not on the actual page! In fact, with the below mock data, if I change "DCT111" to "DCT112" then "Batman - " shows up! But strangely, if I change "Batman" to something else, it stays hidden. What's going on? Also, if I delete the <!--bindings comment, then "Batman" shows up. If I change "Batman" (again, just in Chrome devtools), then it doesn't show up. I've even hooked up a button on the page to run Change Detection when I click it, and that doesn't make it show up.

It should work in that case. Does the value change at any time in your component? — Nicholas K, Jun 09 '20 at 18:21
If I do `{{foo.bar}}{{foo.bar.length}}` then the length always shows, (or even `bar` if I just did that), but not the one inside the `span`. — redOctober13, Jun 09 '20 at 18:32
@redOctober13 This might help. MDN says option should contain text only. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option — Maihan Nijat, Jun 09 '20 at 19:49
@redOctober13 https://stackoverflow.com/questions/11890597/is-it-possible-to-add-div-or-span-inside-an-option-tag/11890623 — Maihan Nijat, Jun 09 '20 at 19:52
@Maihan: oh my word. It was the "span in an option" thing! Maybe a recent version of Chrome broke this? I've been trying to test via CodeSandbox, but everything was showing up fine there, even with a span in an option. I switched it to `` If you want to make this an answer, I'll accept it. And thank you! — redOctober13, Jun 09 '20 at 19:57
@redOctober13 great to hear. updated my answer. Best of luck. — Maihan Nijat, Jun 09 '20 at 20:01

Maihan Nijat · Accepted Answer · 2020-06-09T20:00:43.847

3

This might not solve your problem but might help you. At first the object foo is undefined and you are getting data from an API.

Try optional chaining in *ngIf():

<span *ngIf="foo?.bar">{{foo.bar}} - </span>{{ foo.otherBar }}

Or you can also try:

<span *ngIf="foo && foo.bar">{{foo.bar}} - </span>{{ foo.otherBar }}

If the foo object is null then accessing bar member would throw an error.

There is no issue with the code you provided. Could be something else causing this.

Give a try detecting changes if it helps:

constructor(private cd: ChangeDetectorRef){}

// After assigning value to the object in the API call.
this.cd.detectChanges()

According to MDN, only text is allowed in the option tag. Replace <span> with <ng-container *ngIf...>.

See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

edited Jun 09 '20 at 20:00

answered Jun 09 '20 at 18:48

Maihan Nijat

9,054
11
62
110

Something really strange is going on here. Even if I do `*ngIf="true"` it doesn't show, neither does `*ngIf="false"`. Yet, if I view the HTML in devtools, I can see the markup, but it's not actually showing up on the page! This is so weird... – redOctober13 Jun 09 '20 at 19:12
I edited original post with an image. It shows up if I change the value in `foo.otherBar` in Devtools. But I had a similar thought as you, and already checked CSS; no issues there. – redOctober13 Jun 09 '20 at 19:21
it's inside an option tag: ` – redOctober13 Jun 09 '20 at 19:33
No, I haven't changed the ChangeDetectionStrategy. I updated the original post with more code. – redOctober13 Jun 09 '20 at 19:45
Replacing `span` with `ng-container` did the trick. It still feels like a bug in Chrome though that it will show up if I modify something in Devtools, and show up in the markup, just not onscreen. – redOctober13 Jun 09 '20 at 20:03

Angular: ngIf not working for object.property

1 Answers1