完整代码

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表示的<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <CommandBar x:Name="MyCommandBar" Width="800" HorizontalAlignment="Center" VerticalAlignment="Center" Opening="MyCommandBar_Opening"> <CommandBar.Resources> <Flyout x:Name="MyBtnFly" Placement="Right"> <StackPanel> <AppBarButton x:Name="CommandBarAppBarButton" Icon="Like" Label="Like" /> <AppBarButton Icon="Dislike" Label="Dislike" /> </StackPanel> </Flyout> </CommandBar.Resources> <AppBarToggleButton Icon="Shuffle" Label="Shuffle" /> <AppBarToggleButton Icon="RepeatAll" Label="Repeat" /> <AppBarSeparator/> <AppBarButton Icon="Back" Label="Back" /> <AppBarButton Icon="Stop" Label="Stop" /> <AppBarButton Icon="Play" Label="Play" /> <AppBarButton Icon="Forward" Label="Forward" /> <CommandBar.Content> <TextBlock Text="Now playing..." Margin="12,14"/> </CommandBar.Content> </CommandBar> <TextBlock x:Name="MyText" Tapped="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="Click"></TextBlock> </Grid>中，但允许您显示和隐藏条件（例如，当其内容为空时）。此外，您将避免在组件类中操纵DOM。

private void Button_Click(object sender, TappedRoutedEventArgs e)
{
    MyCommandBar.IsOpen = true;
}

private void MyCommandBar_Opening(object sender, object e)
{
    FrameworkElement senderElement = MyText as FrameworkElement;
    MyBtnFly.ShowAt(senderElement);
}

和

<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

我使用javascript将显示设置为＆＃39; none＆＃39;在OnInit期间

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 {

    }

}

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

5 个答案:

完整代码