2017-04-07 34 views
0

嗨,我需要幫助解決這個問題。我已經使用了* 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> 

回答

0

試試這個。

添加索引你的循環

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

現在你可以添加open類的0th指數的手風琴狀

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

請與您實際的類名稱替換'open'類的名稱將打開手風琴 –

相關問題