如果该卡没有数据，则隐藏 Ionic 卡

Question

我正在构建一个 pokedex，如果没有前一个或下一个革命，我会尝试隐藏 Ionic 卡。

例如：Bulbasaur 有两个下一个进化，没有前一个进化。我需要隐藏之前进化的卡片或者在卡片中显示一条消息说这个神奇宝贝没有之前的进化

我的模板如下所示：

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

在这里，我在循环代码中使用了ng-template 和#noItem 标签，现在每次我在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>

希望对你有帮助。

Source

Answer 5

我在 OnInit 期间使用 javascript 将显示设置为“无”

ngOnInit() {

    var x = document.getElementById("DivPrevious");
    var y = document.getElementById("DivNext");


    if (this.navParams.data.PreviousEvolutions == undefined) {
        x.style.display = "none";
    } else {

    }


    if ( this.navParams.data.NextEvolutions == undefined) {
        y.style.display = "none";
    } else {

    }

}