Ionic 3：在 If 条件下隐藏 HTML 中的列表/列表部分答案

【问题标题】：Ionic 3: Hide List/List Part in HTML on If conditionIonic 3：在 If 条件下隐藏 HTML 中的列表/列表部分
【发布时间】：2018-05-24 04:14:47
【问题描述】：

好的，所以我的应用程序通过输入绘制数据并将它们推送到列表中，这是 html 代码：

 <ion-list>
    <ion-item-divider color="light">
      Applicant Info:
    </ion-item-divider>
    <ion-item color="none">
      Applicant ID: {{id}}
    </ion-item>
    <ion-item color="none">
      Phone number: {{phone}}
    </ion-item>
    <ion-item>
      <div text-center> <button ion-button round color="danger"(click)='copyEmailApp()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumApp()'>COPY PHONE</button> </div>
    </ion-item>
    <ion-item-divider color="light">
      First Target (if exists):
    </ion-item-divider>
    <ion-item color="none">
      Name: {{targetname}}
    </ion-item>
    <ion-item color="none">
      Country Code: {{targetcountrycode}}
    </ion-item>
    <ion-item color="none">
      Phone number: {{targetphone}}
    </ion-item>
    <ion-item color="none">
      Email: {{targetemail}}
    </ion-item>
    <ion-item>
      <div text-center> <button ion-button round color="danger"(click)='copyEmailTarget1()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumTarget1()'>COPY PHONE</button> </div>
    </ion-item>
    </ion-list>

现在这个目标及其数据可能不存在，在这种情况下，我的列表的一部分最终看起来像这样：

现在这个目标的数据是从我的构造函数中的一个数组中提取出来的：

this.targetname = navParams.get('infoList')[0].targets[0].name;

所以我想看看如何创建一个 if 条件，如果 targets[0] 子数组不存在，我的列表的目标部分根本不显示而不是显示为空，我该怎么做那？

【问题讨论】：

标签： typescript ionic-framework ionic3 ionic-native

【解决方案1】：

好的，所以解决方案是将目标的 html 替换为：

<div *ngIf = "targetname != null; else elsetag">
    <ion-item>
      <ion-item-divider color="light">
        Target Info:
      </ion-item-divider>
      <ion-item color="none">
        Name: {{targetname}}
      </ion-item>
      <ion-item color="none">
        Country Code: {{targetcountrycode}}
      </ion-item>
      <ion-item color="none">
        Phone number: {{targetphone}}
      </ion-item>
      <ion-item color="none">
        Email: {{targetemail}}
      </ion-item>
      <ion-item no-lines>
        <div text-center> <button ion-button round color="danger"(click)='copyEmailTarget()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumTarget()'>COPY PHONE</button> </div>
      </ion-item>
    </ion-item>
  </div>
  
  <ng-template #elsetag>
      </ng-template>

【讨论】：