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

现在我正在使用ionic3框架开发一个移动音乐应用程序

在我的项目中有两个按钮

一个是

关于

按钮，另一个是

音乐

按钮

这两个按钮位于同一分区中。

about

按钮在右侧，

music

按钮在左侧

因此，每当用户单击

关于

按钮时，我都需要显示艺术家的详细信息。如果用户单击

音乐

按钮，则我需要向用户显示歌曲列表

---

我有一个关于艺术家和歌曲列表的详细信息…但我不知道如何显示它…有人能帮我吗

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

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

---

希望这能有所帮助。

这些艺术家详细信息和歌曲在你的移动应用程序中列出了不同的页面，还是你必须在同一页面中显示它们？我需要在同一页面中显示@Sakshamgupta你还应该在点击按钮时切换另一个标志，否则两个div将同时显示。我更新了答案。谢谢它工作正常@阿努拉达古纳塞卡拉

public onAboutClick(): void {
   this.isAboutAvailable = !this.isAboutAvailable;
   this.isMusicAvailable = false;
}

public onAboutClick(): void {
   this.isAboutAvailable = false;
   this.isMusicAvailable = !this.isMusicAvailable;
}