Question

我有一些帖子加载在ngOnInit和action togglePost上，为所选帖子加载项目。但是我需要用加载的项目打开各种帖子。

<accordion-group (togglePost)="togglePost($event)">
  <accordion *ngFor="let post of posts" [post]="post">                          
   <ul>
     <li *ngFor="let item of items">
       {{item.name}}
     </li>
  </ul>
  </accordion>          
</accordion-group>

如何实现同时打开多个部分的手风琴？

Answer 1

您可以使用布尔值来确定手风琴是否打开。然后将从togglePost找到的项目分配给每个帖子项目。这样您就不会总是覆盖组件的项目属性

// posts
[
  {
    items: [], // store this post's items
    isOpen: false, // determines if accordion is open
    otherFields...
  }...
]

然后togglePost方法负责加载项目＆amp;切换视图

最后使用ngIf或[hidden]指令来显示/隐藏项目。还有你的内部ngFor使用每个帖子的项目而不是组件的项目属性。现在可以同时打开多个手风琴。

<accordion-group (togglePost)="togglePost($event)">
  <accordion *ngFor="let post of posts" [post]="post">                          
    <ul [hidden]="!post.isOpen">
      <li *ngFor="let item of post.items">
        {{item.name}}
      </li>
    </ul>
  </accordion>          
</accordion-group>

Answer 2

你必须在手风琴选择器中添加活动类。因为它是在子组件中完成的，你必须发送if是否应该作为child的输入是否有效。像这样改变你的模板

 <tp-accordion *ngFor="let post of posts" [title]="post.title" 
 [active]="condition()">
 {{ post.body }}
 </tp-accordion>

并在condition()函数中，执行条件检查并返回true或false。

ondition(){
    if(this.yourcondition){
      return true;
    }
    else {
      return false;
    }
  }

查看工作人员here。希望有所帮助

Angular2 - 保持多个部分打开的手风琴

2 个答案: