如果没有该卡的数据，则隐藏离子卡

Question

我正在构建一个口袋妖怪，如果没有上一次或下一次革命，我正在尝试隐藏离子卡。

例如：球龙有两次下一次进化，没有先前的进化。我需要隐藏卡之前进化的卡片或在卡片中显示一条消息，说这个口袋妖怪没有以前的进化

我的模板如下所示：

     <ion-card>
      <ion-card-header>
        Previous Evolutions
      </ion-card-header>
      <ion-card-content>
          <ion-item *ngFor="let evolutions of pokemon.PreviousEvolutions">
              <img src="assets/images/{{evolutions.Number}}.png" style="width:30%; height:30%">        Name: {{evolutions.Name}}<br/> Number: {{evolutions.Number}}
            </ion-item>
      </ion-card-content>
    </ion-card>
  <ion-card>
    <ion-card-header>
      Next Evolutions
    </ion-card-header>
    <ion-card-content>
      <ion-item *ngFor="let evolutions of pokemon.NextEvolutions">
                <img src="assets/images/{{evolutions.Number}}.png" style="width:30%; height:30%">        Name: {{evolutions.Name}}<br/> Number: {{evolutions.Number}}
              </ion-item>
    </ion-card-content>
  </ion-card>

我的 JSON 看起来像这样：

"PreviousEvolutions": [
    {
      "Number": 1,
      "Name": "Bulbasaur"
    }
  ],
  "NextEvolutions": [
    {
      "Number": 3,
      "Name": "Venusaur"
    }
  ],

Answer 1

只需通过检查pokemon.PreviousEvolutions的长度来使用 *ngIf

 <ion-card>
      <ion-card-header>
        Previous Evolutions
      </ion-card-header>
      <ion-card-content *ngIf="pokemon.PreviousEvolutions.length >0">
          <ion-item *ngFor="let evolutions of pokemon.PreviousEvolutions">
              <img src="assets/images/{{evolutions.Number}}.png" style="width:30%; height:30%">        Name: {{evolutions.Name}}<br/> Number: {{evolutions.Number}}
            </ion-item>
      </ion-card-content>
      <ion-card-content *ngIf="pokemon.PreviousEvolutions.length === 0">
         <h1> No items </h1>
      </ion-card-content>
    </ion-card>

Answer 2

您可以使用 *ngIf 有条件地显示某些元素

<ion-item *ngFor="let evolutions of pokemon.PreviousEvolutions" *ngIf="evolutions.length > 0">
    <img src="assets/images/{{evolutions.Number}}.png" style="width:30%; height:30%">        Name: {{evolutions.Name}}<br/> Number: {{evolutions.Number}}
            </ion-item>

Answer 3

您可以将

它们包装在没有 DOM 表示的<ng-container>中，但允许您显示和隐藏条件（例如，当其内容为空时）。此外，您将避免在组件类中操作 DOM。

<ng-container *ngIf="pokemon.PreviousEvolutions">
  <ion-card> 
  ...
  </ion-card>
</ng-container>

和

<ng-container *ngIf="pokemon.NextEvolutions">
  <ion-card> 
  ...
  </ion-card>
</ng-container>

Answer 4

您可以简单地使用角度模板：

<ion-row *ngIf="items else noItem">
  <ion-col size="12" *ngFor="let post of items | slice:0:limit">
    <ion-card class="welcome-card">
       // card content
    </ion-card>
  </ion-col>
</ion-row>

注意

：注意else noItem部分然后添加以下内容：

<ng-template #noItem>
    <ion-row>
      <ion-col size="12">
        <ion-card class="welcome-card">
          <ion-card-content>
            You don't have any saved article try to add some and back again.
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ng-template>

在这里，我使用了带有#noItem标签的ng-template，我将其放入循环代码中，现在每次我有数据时items都会显示它们，如果我没有数据，我会得到带有错误消息的第二部分。

完整代码

<ion-row *ngIf="items else noItem">
  <ion-col size="12" *ngFor="let post of items | slice:0:limit">
    <ion-card class="welcome-card">
       // card content
    </ion-card>
  </ion-col>
</ion-row>
<ng-template #noItem>
    <ion-row>
      <ion-col size="12">
        <ion-card class="welcome-card">
          <ion-card-content>
            You don't have any saved article try to add some and back again.
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ng-template>

希望对您有所帮助。

源