Question

当离子页面加载时，我需要默认打开top open ion-fab-list。

请提供一些帮助。

我尝试了以下解决方案，但没有奏效：

1。在.html中的fab-button上编写（点击）事件，并从.ts。

调用事件

＆＃13;

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabButtonClicked(); 
}
fabButtonClicked() {
  console.log('Fab Button clicked.');
}

＆＃13;

<ion-fab bottom right #fab class="space-fab-list">
      <button ion-fab #fabBtn mini class="fab-button" [disabled]="!isButtonsFound" (click)="fabButtonClicked()"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="top" class="spaces-side-list">
      <button ion-fab *ngFor="let buttonObj of buttonList" class="button-fab-object" (click)="doSomthing(buttonObj)">buttonObj.title</button>
      </ion-fab-list>
</ion-fab>

＆＃13;

2。调用FabContainer类的setActiveLists方法

问题：使用此解决方案，默认情况下打开ion-fab-list，但不会从* ngFor填充按钮。空的fab-list开了。

＆＃13;

@ViewChild('fab') fabElement: FabContainer;

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabElement.setActiveLists(true);
}

＆＃13;

此解决方案对我不起作用。

请帮我解决这个问题。

动态生成按钮到ion-fab-list： 从Web服务

获取的按钮列表

＆＃13;

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

＆＃13;

谢谢， Punita

Answer 1

在这里，

组件方：

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>

<强> WORKING DEMO

使用动态生成按钮进入ion-fab-list：

组件方：

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

<强> WORKING DEMO

Answer 2

感谢您的建议。我使用ChangeDetectorRef解决了这个问题。

在setActiveLists（）方法执行

之前调用detectChange（）方法

this.changeDetectorRef.detectChanges();
this.fabElement.setActiveLists(true);

由于

默认情况下打开ion-fab-list

2 个答案: