Angular *ngFor & Materialize-CSS Collapsible 不工作答案

【问题标题】：Angular *ngFor & Materialize-CSS Collapsible Not workingAngular *ngFor & Materialize-CSS Collapsible 不工作
【发布时间】：2018-06-13 19:54:04
【问题描述】：

我在我的项目中使用 Materialize-CSS 可折叠组件，并尝试将可折叠组件放入另一个组件中。如果我删除了 ng-container 中的第一个 *ngFor，那么它就可以正常工作，但是一旦我添加了 *ngFor 循环，它将无法工作。任何帮助表示赞赏！我在下面附上了简化代码和照片

<ul class="collapsible" data-collapsible="expandable">
  <ng-container *ngFor="let month of months">
  <li >
    <div class="collapsible-header">
      <span><i class="material-icons">date_range</i> &nbsp;<strong>{{month | amDateFormat: 'MMMM YYYY'}}</strong></span>
    </div>
    <div class="collapsible-body">
      <ul class="collapsible" data-collapsible="expandable">  
        <li *ngFor="let feeding of feedings | orderBy: 'date'">
          <ng-container *ngIf="(month | amDateFormat: 'MMM YYYY') == (feeding.date | amDateFormat: 'MMM YYYY')">
            <div class="collapsible-header valign-wrapper">
              <span><i class="material-icons">today</i> &nbsp;<strong>{{feeding.date | amDateFormat:'MMMM Do YYYY'}}</strong></span>
            </div>
            <div class="collapsible-body">
              ...
            </div>
          </ng-container>
        </li>
      </ul>
    </div>
  </li>
</ng-container>
</ul>

这是一张显示我想要的照片 The bottom collapsible "Month" is working correctly. The top one has the *ngFor loop and will not open the inside collapsibles

谢谢！

【问题讨论】：

标签： html css angular materialize

【解决方案1】：

我能够将 angular2-materialize 和hammerjs 安装到我的应用中，然后更改 ul 标签

<ul class="collapsible" data-collapsible="accordion" materialize="collapsible">

我在两个 ul 中都添加了 materialize="collapsible" 并修复了它！

【讨论】：