How to use *ngIf and ng-show in Ionic2 view ? if value is empty, hide element

Ionic Framework ionic-v3
1

hi guy, there is a field,i am not sure whether it is empty.so i hope as it is empty .the element hide.i try many ways.all failed. can someone tell the righ way to solve the problem？ thanks bro.
this a detailpage, passenger is a model, the data of detail , passed from a list. data shows is normal. CarType may be empty.so if empty,i hide this elment.

here some ways from google searche. failed.never hide the element

  <ion-label ng-if="passenger.CarType.length > 0">,{{passenger.CarType}}</ion-label>
  <ion-label ng-if="!passenger.CarType">,{{passenger.CarType}}</ion-label>
  <ion-label ng-if="passenger.CarType">,{{passenger.CarType}}</ion-label>
  <ion-label ng-if="!!passenger.CarType">,{{passenger.CarType}}</ion-label>

  <div *ngIf="passenger.CarType">,{{passenger.CarType}}</div>
  <div *ngIf="!passenger.CarType">,{{passenger.CarType}}</div>
  <span ng-if="!passenger.CarType">null</span> <span ng-if="passenger.CarType">null</span>

  <span ng-show="passenger.CarType">null</span> <span ng-show="!passenger.CarType">null</span>
  <span ng-show="passenger.CarType==''">null</span> <span ng-show="passenger.CarType== null">null</span>
2

Hi @WillLee, I suggest you take a closer look at the Angular 2 Docs which can be found here. Since Ionic2 makes use of Angular2, you should avoid old syntax. In other words, ng-if is no longer supported. The new correct syntax is *ngIf. Also they dropped the support of using ng-show / ng-hide. Instead it got replaced by the [hidden] attribute.

I suggest you use ngIf, since we shouldn’t render any unecessary HTML. You could try this:

More on using the safe navigation question mark can be found here.

3

thank you @luukschoen!
this problem have been resloved. the cmd console got stuck. :joy: .i closed the cmd window…restart. it is ok.