Question

嘿伙计们，我需要帮助来解决这个问题。我已经为手风琴使用了* ngFor循环，在这里我需要第一个手风琴默认打开。任何人都可以帮我这个。这是我的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>

Answer 1

试试这个。

为循环添加索引

<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)}"

默认情况下，第一个手风琴应设置为打开而不在Angular2中单击它？

1 个答案: