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

Question

我有一个 ngx-bootstrap 手风琴，每次我使用 .subscribe() 方法从 API 回调数据时，它都会关闭打开的面板。手风琴 headers 中的内容都无缝更改，没有明显的重新加载，但是由于手风琴内部内容的更改是通过范围滑块控制的，因此必须 re-open 每个面板都非常烦人更改愤怒滑块的时间。

有什么办法可以阻止这种情况发生？

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>

Answer 1

这是使用 Angular 时的常见问题。您的内容已更新，因此 Angular 别无选择，只能将其从 dom 中销毁并重新创建，从而失去对项目的追踪.. 希望存在解决方案！

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

这个答案也很好地解释了它的作用和使用方法

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

ngx-bootstrap Accordion closing when subscribing to API method

ngx-bootstrap

angular

ngx-bootstrap-accordion