ion-list在ion-menu里面不起作用

Question

我的ion-menu是写到了触发侧滑的同一个页面下，代码如下；

<ion-header>

  <ion-navbar #mycontent>
    <ion-title>工单</ion-title>
    <button ion-button menuToggle color="primary" end>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">取消</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>

</ion-content>

<ion-menu [content]="mycontent" side="right">
  <ion-content>
    <ion-list>
      <button menuClose ion-item>
        haha
      </button>
      <button menuClose ion-item>
        haha
      </button>
      <button menuClose ion-item>
        haha
      </button>
      <button menuClose ion-item>
        haha
      </button>
    </ion-list>
  </ion-content>

  <ion-footer>
    <ion-toolbar>
      <button ion-button menuClose>Close Menu</button>
    </ion-toolbar>
  </ion-footer>
</ion-menu>

在ion-list里面的“haha"没有显示，只有这样的：

为什么文字显示不出来呢

Answer 1

提问者 soputasmile 2018-01-10 22:05:21

而且这个很奇怪的是，我不用ion-list可以正常显示，比如我把ion-menu代码改成这个：

<ion-content>
  <div padding="2px"></div>
  <div class="row" padding="3px">
    <div class="col">haha</div>
    <div class="col">haha</div>
    <div class="col">haha</div>
    <div class="col">haha</div>
  </div>
  <!--<ion-list>-->
    <!--<button menuClose ion-item >-->
      <!--haha-->
    <!--</button>-->
    <!--<button menuClose ion-item>-->
      <!--haha-->
    <!--</button>-->
    <!--<button menuClose ion-item>-->
      <!--haha-->
    <!--</button>-->
    <!--<button menuClose ion-item>-->
      <!--haha-->
    <!--</button>-->


  <!--</ion-list>-->
</ion-content>

这样就能正常显示了：

Answer 2

提问者 soputasmile 2018-01-10 21:28:40

调试的源码加载情况

Answer 3

Parry 2018-01-10 18:53:54

你 chrome 右键看看元素有没有加载出来。

• 提问者 soputasmile #1

  有加载，这里好像不能上传图片，老师麻烦看一下上面我在回答里面的 图片