Angular 默认情况下，打开ion fab列表

我需要在离子页面加载时默认打开顶部打开离子工厂列表

请提供一些帮助

我尝试了以下解决方案，但没有成功：

1。在.html中的fab按钮上写入（单击）事件，并从.ts调用事件。

IonViewDiCenter（）{
这是calculateButtons（）；
}
计算按钮（）{
//按钮列表填充代码
这个.fabbutonclicked（）；
}
fabButtonClicked（）{
日志（'单击了工厂按钮'）；
}

标题

在这里

组件端：

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

//Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

模板端：

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

//Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

模板端：

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

//Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

家
{{button.name}

---

谢谢你的建议。我已经使用ChangeDetectorRef解决了这个问题

在执行setActiveList（）方法之前调用detectChange（）方法

this.changeDetectorRef.detectChanges（）；
this.fabeElement.setActiveList（true）谢谢你的回复。但这对我不起作用。我正在使用*ngFor向晶圆厂列表添加动态按钮。列表已打开，但ion fab列表中的按钮未附加“show”类。因此，工厂列表中的按钮不显示。若我手动检查按钮并用“show”编辑类，那个么按钮将显示在列表中。用我最新的晶圆厂列表代码编辑帖子。@Punita，它的alos使用动态按钮，我已经尝试过这个.fabeElement.SetActiveList（true）；以及这个.fabeElement.toggleList（）；两种方法都有，但不显示按钮。按按钮列表是从webserviceyes获取的，使用此.changeDetectorRef.detectChanges（）解决了问题；在此.fabElement.SetActiveList（true）方法调用之前，将该代码块放入
setTimeout（）
中，就像我在演示中所做的那样，它将100%工作。