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

问题描述：

我有一些帖子加载在ngOnInit和action togglePost中，用于加载所选帖子的项目。但我需要保持打开与加载项目的各种职位。Angular2 - 保持多个部分打开的手风琴

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

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

其UI框架您使用的？ –

我正在使用Angular –

定义“各种帖子”...你如何识别这些帖子？条件是什么？ –

答

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

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

然后togglePost方法是负责加载项&切换视图

最后使用ngIf或[隐藏]指令，显示/隐藏项目。也有你的内心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>

如果isOpen是假的，不会停止渲染某些部分吗？问题是打开或关闭手风琴，不要阻止他们渲染......至少这就是我所理解的！ –

@VikhyathMaiya你是对的。如果这是OP的意图，我们可以使用[hidden]指令隐藏而不是未呈现。 – LLai

不，再次，这将消除手风琴本身的一部分。它应该关闭而不是隐藏 –

答

你必须主动类添加到手风琴selector.Since它是在子组件完成后，你必须发送时是否应进行或不作为输入child.Change模板这样

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

见工作plunker here。希望它有助于

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

相关推荐