Angular 2 Bootstrap动态生成的面板折叠问题

Question

getInstituteDetails(id, state) {
    this.selectedInstituteId = id;
    if (state == false) {
      var jsonBody = {};
      jsonBody['activity'] = "institute"
      jsonBody['instituteid'] = id
      var apiUrl = "mahacareermitra/";
      this.LanguageService.postCall(jsonBody, apiUrl)
        .subscribe(
        data => {
          if (data.message == "ok") {
            this.instituteDetails = data.data.course
          }
        },
        err => {
            this.toastr.error(this.translate.instant("errors.tryAgain"));

        });
    } else {
      console.log("No Request")
    }
  }

<div class="card text-left" *ngFor="let data of instData;let i = index">
            <div class="card-header">
              <span class="font-weight-bold caret" (click)="data.is_active = !data.is_active;getInstituteDetails(data.instituteid,data.is_active)"
                data-toggle="dropdown" [attr.data-target]="'#' + data.instituteid">
                {{ data.institutename }}
              </span>
            </div>
            <div class="card-body">
              <div *ngIf="data.is_active">
                <div class="row show dropdown">
                  <div class="col-md-6">
                    <div class="details-section">
                        <p class="font-weight-bold">Address : </p>
                        <p>{{ data.address }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Phone : </p>
                        <p>{{ data.phone }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Mobile : </p>
                        <p>{{ data.mobile }}</p>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="details-section">
                        <p class="font-weight-bold">District : </p>
                        <p>{{ data.district }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Block : </p>
                        <p>{{ data.taluka }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Email :</p>
                        <p>{{ data.email }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="dropdown " id="{{data.instituteid}}">
                <div class="row" *ngIf="!data.is_active">
                  <div class="col-md-6">
                    <div class="details-section">
                        <p class="font-weight-bold">Address : </p>
                        <p>{{ data.address }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Phone : </p>
                        <p>{{ data.phone }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Mobile : </p>
                        <p>{{ data.mobile }}</p>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="details-section">
                        <p class="font-weight-bold">District : </p>
                        <p>{{ data.district }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Block : </p>
                        <p>{{ data.taluka }}</p>
                    </div>
                    <div class="details-section">
                        <p class="font-weight-bold">Email :</p>
                        <p>{{ data.email }}</p>
                    </div>
                  </div>
                  <hr *ngIf="data.instituteid == selectedInstituteId">
                  <div *ngIf="data.instituteid == selectedInstituteId" class="w-100">
                    <div class="custom-cols" [ngStyle]="{'width':instituteDetails.length == '1' ? '100%' : '50%' }" *ngFor="let items of instituteDetails">
                      <span class="text-bold" style="color:gray; font-size:125%">{{interestName[items.interest]}}</span>
                      <div *ngFor="let singleitemCourse of items.course" class="mb-3">
                        <span class="text-bold">
                          <b>{{ singleitemCourse.coursename}}</b>
                        </span>
                        <div class="rel" *ngFor="let singleitemTrade of singleitemCourse.trades">
                          <b class="dash">
                            - </b>{{singleitemTrade.tradename}}
                          <span *ngIf="singleitemTrade.duration">
                            ({{singleitemTrade.duration}})
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

你好， 我正在获取上述所有属性，如InstituteID，is_active，instData等。以上示例工作正常。但是我的问题是，当我单击面板一，然后单击面板二，然后再次单击面板时，它不会扩展。我找不到确切的问题。我怎么解决这个问题？请帮忙。 预先感谢！