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>

我該如何實現保持多個部分同時打開的手風琴？

來源

2017-08-17 S.Kos

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

來源

2017-08-17 14:21:09 LLai

如果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。希望它有助於

來源

2017-08-18 07:35:26

Angular2 - 保持多個部分打開的手風琴

回答

相關問題