Question

目前我正在从事一些家庭项目并学习离子学。我是一名移植到Ionic的php开发人员。

所以基本上我在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>

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

2 个答案: