기본적으로 첫 번째 아코디언은 Angular2로 클릭하지 않고 열리도록 설정해야합니까?

안녕하세요 여러분,이 문제를 해결하는 데 도움이 필요합니다. 나는 * ngFor 루프를 사용하여 아코디언을 만들었고,이 첫 번째 아코디언이 기본적으로 열려 있어야합니다. 누구든지 이걸 도와주세요. 여기 내 Angular2 코드입니다.기본적으로 첫 번째 아코디언은 Angular2로 클릭하지 않고 열리도록 설정해야합니까?

<div class="today col-lg-9 col-md-12 col-sm-12 col-xs-12"> 
     <md-card *ngFor="let value of timer_entries.entries" style="padding:0px !important;margin-bottom: 10px;margin-top: 15px;"> 
      <div class="accordion-section"> 
       <accordion> 
        <accordion-group #group> 
         <div accordion-heading> 
          {{value[0]}} 
          <i class="pull-right glyphicon glyphicon-triangle-right" [ngClass]="{'closeArrow': group?.isOpen, 'openArrow': !group?.isOpen}"></i> 
          <span class="pull-right padding-right-20 color-primary">{{value[2]}}</span> 
         </div> 
         <table border="0" cellpadding="0" cellspacing="0" st-table="rowCollection" class="table table-hover" layout-align="center"> 
          <tbody class="table_body" layout-align="center"> 
           <tr class="table-content wd_table_row" *ngFor="let d of value[1]"> 
            <td class="date-cell">{{d.times[0].date | date:'dd/MM/yyyy'}}</td> 
            <td class="location-cell">{{d.department}} 
            </td> 
            <td class="category-cell">{{d.category}}</td> 
            <td class="subcategory-cell">{{d.subcategory}}</td> 
            <td class="client-cell">{{d.client}}</td> 
            <td class="project-cell">{{d.project}}</td> 
            <td class="duration-cell">{{d.total_hours}}</td> 
            <td class="icon-cell-one" style="cursor:pointer;"> 
             <img class="wd-reload-icon" style="width:16px;" src="/images/icons/refreshIcon.svg" alt="reload"> 
            </td> 
            <td class="icon-cell-one" style="cursor:pointer;" (click)="editModal.show()"> 
             <img style="width:16px;" src="/images/icons/pencil-new.svg" alt="edit"> 
            </td> 
            <td class="icon-cell-two" style="cursor:pointer;" (click)="deleteModal.show()"> 
             <img style="width:16px;" src="/images/icons/delete-new.svg" alt="delete"> 
            </td> 
           </tr> 
          </tbody> 
         </table> 
        </accordion-group> 
       </accordion> 
      </div> 
     </md-card>

출처

2017-04-07 Musheer Aiman

시도해보십시오. 이제

<md-card *ngFor="let value of timer_entries.entries; let i = index" style="padding:0px !important;margin-bottom: 10px;margin-top: 15px;">

당신이

[ngClass]="{'open':(i==0)}"

출처

2017-04-07 07:15:16

처럼 0th 지수의 아코디언에 클래스 open를 추가 할 수 있습니다 루프에 인덱스를 추가

아코디언을 여는 실제 클래스 이름으로'open' 클래스 이름을 대체하십시오 –

기본적으로 첫 번째 아코디언은 Angular2로 클릭하지 않고 열리도록 설정해야합니까?

답변

관련 문제