Search code examples
angularangular-ng-if

Angular: ngIf not working for object.property

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? enter image description here 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.

Solution

  • 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