如何在 ionic 和 angular 中使用 ngIf 条件并相应地显示视图？

Question

目前我正在做一些家庭项目并学习 ionic。我是一个 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>

谢谢。

Answer 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>

Answer 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>

如何在 ionic 和 angular 中使用 ngIf 条件并相应地显示视图？

How to use ngIf condition in ionic and angular and display the view accordingly?

angular-ng-if

ionic-framework

angular