부트 스트랩 축소 기능을 true로 설정/webapp이 시작될 때 표시합니다.

Question

앱 시작시 접을 수있는 내용을 열려면 도움이 필요합니다. 누군가 나를 기쁘게 도와 줄 수 있습니까? 내 하찮은 영어 실력에 죄송하다는 말씀을 드리고 싶습니다. 이 것 때문에 부트 스트랩 문서

.collapse.show shows content

에서

Answer 1

//component.ts 
 

 
isCollapsed: boolean = true;

<!--component.html--> 
 

 
<div class="container" *ngFor="let List of List; let i = index"> 
 
    <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a> 
 
    <div id="List-{{ i }}" class="collapse"> 
 
    <ul style="list-style: none"> 
 
     <li> {{List.prdName}}</li> 
 
     <li> {{List.prdCategory}}</li> 
 
     <li> {{List.prdSup}}</li> 
 
     <li> <img src="{{List.prdImage}}"></li> 
 
    </ul> 
 
    </div> 
 
</div>

그래서 당신이 할 일은 적절한 클래스 바인딩 요소입니다

<div class="container" *ngFor="let List of List; let i = index"> 
    <a href="#List-{{ i }}" class="btn btn-info" data-toggle="collapse">{{List.prdName}}</a> 
    <div id="List-{{ i }}" class="collapse" [class.show]="isCollapsed"> <!-- if the expression will be true class "show" will be applied. --> 
    <ul style="list-style: none"> 
     <li> {{List.prdName}}</li> 
     <li> {{List.prdCategory}}</li> 
     <li> {{List.prdSup}}</li> 
     <li> <img src="{{List.prdImage}}"></li> 
    </ul> 
    </div> 
</div>