如何在离子和角度中使用 ngIf 条件并相应地显示视图？答案

【问题标题】：How to use ngIf condition in ionic and angular and display the view accordingly?如何在离子和角度中使用 ngIf 条件并相应地显示视图？
【发布时间】：2018-04-02 03:12:34
【问题描述】：

目前我正在做一些家庭项目并学习离子。我是一名 php 开发人员，正在转向 Ionic。

所以基本上我在 Ionic 项目中使用 php 概念，现在我坚持使用 ngIf 条件。

我有一个显示用户信息的个人资料页面。条件1：如果用户没有设置他们的卡详细信息，我想显示添加卡按钮

条件 2：如果卡片详细信息已经设置，我想显示编辑卡片按钮并隐藏添加卡片按钮。

这里是 HTML 视图。

<ion-row *ngFor="let c of card  | async">
  <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
  <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
</ion-row>
<ion-row >
  <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
  <img src="http://placehold.it/200x100" width="100%" height="30px">
</ion-row>

谢谢。

【问题讨论】：

标签： angular ionic-framework angular-ng-if

【解决方案1】：

你可以使用类似的东西：

<ng-container *ngIf="(card | async)?.length > 0; else noCard">
    <ion-row *ngFor="let c of card  | async">
        <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
        <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
    </ion-row>
</ng-container>
<ng-template #noCard>
    <ion-row>
      <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
      <img src="http://placehold.it/200x100" width="100%" height="30px">
    </ion-row>
</ng-template>

【讨论】：

tnx.我会试试看的。
tnx.像魅力一样工作
很高兴听到这个消息:)
当 card 是一个数组时效果很好。但是当 card 是 observable 时 card.length 不起作用。我应该为检查 observable 设置什么条件。？我是新手，所以这可能是一个简单的错误。请帮助
谢谢男人。你拯救了我的一天。现在刚刚尝试过，它就像 observable 的魅力一样。

【解决方案2】：

以下是使用 ngIfElse 的方法

<ion-row *ngFor="let c of card  | async">
    <div *ngIf="condition; else other">
        <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
        <img src="http://placehold.it/200x100" width="100%" height="30px">
    </div>
    <ng-template #other>
        <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
        <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
    </ng-template>
</ion-row>

【讨论】：

tnx 为您提供帮助。