如何使用ionic3中的按钮隐藏/显示功能

时间:2018-05-08 05:10:39

标签: angular ionic-framework ionic3

现在我正在使用ionic3 framework开发一个移动音乐应用

在我的项目中有两个按钮

一个是 about 按钮,另一个是 music 按钮

这两个按钮位于同一个div 中。 about 按钮位于右侧 music 按钮位于左侧 < / p>

因此,每当用户点击 about 按钮时,我都需要显示有关artist.if用户点击 music 按钮的详细信息,然后我需要向用户显示歌曲列表

我有关于艺术家和歌曲列表的详细信息......但我不知道如何展示它......任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

您可以在template.html中执行类似的操作

class ProductSerializer(serializers.ModelSerializer):

    class Meta:
        model = Product
        fields = ("id", "other fields")

class OrderDetailSerializer(serializers.ModelSerializer):
    prodcut = ProductSerializer()

    class Meta:
        model = OrderDetail
        fields = ("id", "product_size", "quantity", "sub_total", "product")

在您的组件中

<div>
  <button ion-button (click)="onAboutClick()">About</button>
  <button ion-button (click)="onMusicClick()">Music</button>
<div>

<div *ngIf="isAboutAvailable">
  // about content
</div>

<div *ngIf="isMusicAvailable">
  // music content
</div>

希望这有帮助。