[英]Angular *ngFor & Materialize-CSS Collapsible Not working
I'm using Materialize-CSS collapsibles inside my project and I'm trying to put a collapsible inside of another. 我在项目中使用Materialize-CSS可折叠对象,并且试图将可折叠对象放入另一个对象中。 If I remove the first *ngFor inside ng-container, then it works just fine, but once I add the *ngFor loop it will not work. 如果我删除了ng-container中的第一个* ngFor,那么它工作得很好,但是一旦我添加* ngFor循环,它将无法工作。 Any help is appreciated! 任何帮助表示赞赏! I attached the simplified code & a photo below 我在下面附上了简化的代码和一张照片
<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> <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> <strong>{{feeding.date | amDateFormat:'MMMM Do YYYY'}}</strong></span>
</div>
<div class="collapsible-body">
...
</div>
</ng-container>
</li>
</ul>
</div>
</li>
</ng-container>
</ul>
Here is a photo showing what I want The bottom collapsible "Month" is working correctly. 这是一张显示我想要的照片底部可折叠的“月”正常工作。 The top one has the *ngFor loop and will not open the inside collapsibles 最上面的有* ngFor循环,不会打开内部的可折叠对象
Thank you! 谢谢!
I was able to install angular2-materialize & hammerjs to my app and then change the ul tags 我能够将angular2-materialize和Hammerjs安装到我的应用中,然后更改ul标签
<ul class="collapsible" data-collapsible="accordion" materialize="collapsible">
I added materialize="collapsible"
to both ul's and that fixed it! 我向ul都添加了materialize="collapsible"
,并已将其修复!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.