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

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

编辑卡
添加卡

---

谢谢。

您可以使用以下内容：

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

编辑卡
添加卡

您可以使用以下内容：

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

编辑卡
添加卡

以下是如何使用

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>

添加卡
编辑卡

以下是如何使用

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。我会试试看。听到这句话，它就像一个魔术师：）当卡是一个数组时，它非常有效。但当卡是可观察的卡时，它的长度就不起作用了。我应该设置什么条件来检查可观察性。？我是新来的，所以这可能是一个简单的错误。请帮忙。你救了我一天。现在刚刚尝试过，对observable.tnx来说就像一个魅力。我会试试看。听到这句话，它就像一个魔术师：）当卡是一个数组时，它非常有效。但当卡是可观察的卡时，它的长度就不起作用了。我应该设置什么条件来检查可观察性。？我是新来的，所以这可能是一个简单的错误。请帮忙。你救了我一天。现在就尝试一下，效果很好。谢谢你的帮助。谢谢你的帮助。