以编程方式隐藏/显示离子晶圆厂按钮答案

【问题标题】：Hide/Show ion fab button programmatically以编程方式隐藏/显示离子晶圆厂按钮
【发布时间】：2020-04-11 22:41:11
【问题描述】：

谁能帮我从ion-fab的button列表中找到hide/show特定按钮的方法

【问题讨论】：

你能提供一些你过去是如何实现离子图标的吗？
它是关于的，它包含一个 ion fab 按钮列表
为答案提供更多代码，您可以通过给出条件使用*ngIf

标签： javascript angular reactjs typescript ionic-framework

【解决方案1】：

我将动态呈现 fabButtons 列表，以便您只将按钮添加到示例所需的列表中

这不是完整的解决方案，但可以帮助您入门

import { Component } from "@angular/core";

@Component({
  selector: "app-tab1",
  templateUrl: "tab1.page.html",
  styleUrls: ["tab1.page.scss"]
})
export class Tab1Page {
  fButtons = [
    { iconName: "logo-vimeo", isActive : true },
    { iconName: "logo-instagram", isActive : false },
    { iconName: "logo-facebook", isActive : true }
  ];
  constructor() {}

  getActive() {
    return this.fButtons.filter((i:any) => {
      return i.isActive === true
    })
  }
}

模板

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button *ngFor="let b of getActive()">
        <ion-icon name={{b.iconName}}></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

【讨论】：

【解决方案2】：

如果您使用 Ionic 框架，请使用此示例代码

<IonFabList side="top">

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-facebook" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-twitter" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-youtube" />
  </IonFabButton>

  <IonFabButton *ngIf="..." color="primary">
    <IonIcon icon="logo-vimeo" />
  </IonFabButton>

</IonFabList>

在*ngIf写下你的条件

【讨论】：

我已经在使用它，但它对我不起作用，使用 *ngIf 创建的问题是离子框架字使用类名“隐藏”和“显示”，所以如果我使用 *ngIf 不控制ionic 添加到 ion fab 按钮的类名。
您想在元素中动态添加或删除类名（hide 和show）？对吗？
是的，但这里的问题是离子添加自动隐藏和显示，所以如果我使用 ngClassName 我发现“隐藏隐藏”或“隐藏显示”
尝试在元素上使用[hidden]="..."