订阅API方法时，ngx-bootstrap手风琴关闭

问题描述

我有一个ngx-bootstrap手风琴，每次使用.subscribe()方法从API回调数据时，该手风琴都会关闭打开的面板。手风琴标题中的内容全部无缝变化，而没有明显的重新加载，但是由于手风琴内部内容的更改是由范围滑块控制的，因此每当更改rage滑块时都必须重新打开面板是非常烦人的

有没有办法阻止这种情况的发生？

HTML：

<accordion [isAnimated]="true" [cloSEOthers]="true">
    <accordion-group *ngFor="let r of reccs; let i = index" panelClass="customClass">
        <div class="row text-left" accordion-heading>
            <div class="col">
                <h4><strong [ngStyle]="{'color': brand?.colours.primary}">{{ r.name }}</strong> <small [ngStyle]="{'color': brand?.colours.secondary}"> {{ r.financials.representativeAmountAsstring }} {{termTimedisplay}}</small> <span *ngIf="i===0" class="badge badge-success ml-3">Recommended</span></h4>
                <p [ngStyle]="{'color': brand?.colours.tertiary}">{{ r.tagline }}</p>
            </div>
            <div class="col">
                <div id="progress" class="container">
                    <div class="hex-container">
                        <div *ngFor="let p of r.products" [popover]="popTemplate" [popoverTitle]="p.type" triggers="mouseenter:mouseleave" [ngClass]="{'product-included': p.inclusivity === 'included','product-not-required' : p.inclusivity === 'notRelevant'}">
                            <ng-template #popTemplate>{{p.name}}</ng-template>
                            <img src="../../assets/questions/progress/1.png" >
                        </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mt-3">
                <div class="col">
                  <p>{{ r.name }}</p>
                </div>
              </div>
            </accordion-group>
          </accordion>

API方法调用：

loadRecommendations(term: number,paymentCycle: string) {
    // Get the choices from the API
    this.reccommendationsService.getRecommendations(term,paymentCycle).subscribe(res => {
      // Load the choices to angular
      this.choices = res;
      // Initalise the reccommendations array
      this.reccs = new Array();
      // Load the array with choices
      for (const c of this.choices.choices) {
        // Make a stringly typed choice model
        this.recc = c;
        // Add choice model to the array
        this.reccs.push(this.recc);
      }
      this.reccs.reverse();
      if (this.reccs) {
        this.chiocesPresent = true;
        this.bestProduct = this.reccs[0];
      } else {
        this.chiocesPresent = false;
      }
      this.allInclusive();
      this.allInclusiveFeatures();
    });
  } 

滑块：

<div class="text-center sliders">
        <input type="range" min="6" max="60" step="6" class="slider" [(ngModel)]="term" id="term" (change)="loadRecommendations(this.term,this.termTime)">
        <p class="text-right mt-2">{{term}} months</p>
      </div>

解决方法

使用Angular时这是一个常见问题。 您的内容已更新，因此Angular别无选择，只能从dom中销毁它，然后重新创建它，从而丢失对项目的跟踪。 希望有解决方案！

我建议您使用trackByFn https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

此答案也很好地说明了它的作用以及如何使用它https://stackoverflow.com/a/45391247/10265078