Ionic if else 语句显示 div

Question

我正在使用离子框架制作应用程序。我想做一个 if/else 语句来在 html 中显示 div 。我正在从第 1 页到第 2 页的导航 url 获取数据。在第 2 页中，我使用激活的路由参数从第 1 页获取数据。

有时来自 url 的数据像这样 mypage/iaw/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%20Airways/IAW/null

Answer 1

您可以像这样实现 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>

Answer 2

我认为您应该像这样更改您的构造函数代码

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);
    });
}

这里主要是初始化 ativate 路由订阅处理程序中的 "id" 字段。

然而，在 angular 中实现路由的最佳方式是使用 RouterModule。查看此 link 了解更多详情 https://angular.io/guide/router

Answer 3

您可以像这样实现 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>

Ionic if else 语句显示 div

Ionic if else statement to display div

angular

ionic4