Question

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

有时数据来自像mypage/iaw/null这样的url，所以我想检查字符串是否为null hide 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>

我的网址示例

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

Answer 1

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

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”字段。

但是，以角度实现路由的最佳方法是使用RouterModule。请查看此链接以获取更多详细信息https://angular.io/guide/router

Answer 2

您可以实现其他类似的方式，因此无需编写单独的ngIf来检查else条件

await

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

3 个答案: