Блог

Я использую ionic framework для создания приложения. Я хочу выполнить оператор if / else для отображения div в html. я беру данные из URL-адреса навигации со страницы 1 на страницу 2. на странице 2 я использую активированные параметры маршрута для получения данных со страницы 1 .

Иногда данные, поступающие с URL mypage/iaw/null -адреса, выглядят так, что я хочу проверить, не скрывает ли строка null div.

что я сделал

  public myFlag: boolean = false;
  id : any

      constructor(private nav : NavController,private activatedRoute : ActivatedRoute) {
                    this.activatedRoute.params.subscribe((params) => {

                      this.id = params['id'];
                    });

            if (this.id=="null") {
                this.myFlag = true

            }else{
              this.myFlag = false
            }
 

HTML

   <div *ngIf="myFlag">

    <ion-button expand="block" fill="outline"color="success"  (click)="navigate(id)">Flight route</ion-button>

  </div>      
  <div *ngIf="!myFlag">

    No data 
  </div>     
 

мой пример URL

 localhost/flightserachdetails/IA172/Isfahan/1555496100/CR9/scheduled/Iraqi Airways/IAW/null 
 

Я думаю, что вам следует изменить свой код конструктора примерно так

 constructor(private nav : NavController,private activatedRoute : ActivatedRoute) {
    this.activatedRoute.params.subscribe((params) => {
        this.id = params['id'];
        this.myFlag = this.id == "null";
        console.log(this.myFlag);
    });
}
 

Главное здесь — инициализировать поле «id» внутри обработчика подписки ativate route.

Однако лучший способ реализовать маршрутизацию в angular — использовать RouterModule . Проверьте эту ссылку для получения более подробной информации https://angular.io/guide/router

Вы можете реализовать оператор if else следующим образом:

 <div *ngIf="myFlag;else other_content">
  <ion-button expand="block" fill="outline"color="success (click)="navigate(id)">Flight route</ion-button>
</div>
<ng-template #other_content>
  No data
</ng-template> 

вы можете реализовать if else подобным образом, поэтому нет необходимости писать отдельный ngIf для проверки условия else

  <div *ngIf="myFlag != null; elseCondition">
    <ion-button expand="block" fill="outline"color="success"  (click)="navigate(id)">Flight route</ion-button>
  </div>      
  <ng-template #elseCondition>
    No data 
  </ng-template>