按钮单击事件问题最新面板未在 mat-expansion-panel 中打开

Question

单击 mat-expansion-panel-header 内的按钮，每当单击此按钮时，都会插入新面板并仅打开最新插入的面板。

我在打开这个最新面板时遇到问题。

**HTML**
 <mat-accordion>
            <mat-expansion-panel *ngFor="let detailForm of getFormControl();let i = index;" class="expansion-panel" hideToggle>
                <mat-expansion-panel-header>
                <div class="header-profile">
                    <div>
                        <p class="title">Panel</p>
                    </div>
                    <div class="header-profile-rightside">                        
                        <p class="text-decoration-underline" 
                           (click)="addItem()">+Add Panel</p>
                        <img src="../../../../assets/images/dropdown.jpg" alt="" />
                    </div>
                
                </div>
                </mat-expansion-panel-header>
                <form class="example-form" [formGroup]="detailForm" autocomplete="off">
                <div>
                    Open Panel - {{i}}
                </div>
                </form>
            </mat-expansion-panel>
        </mat-accordion>


**TS**
get authorisedSignatoryDetailRef(): FormArray {
    if (this._ProfileFormService.taxRegistrationForm !== undefined && this._ProfileFormService.taxRegistrationForm !== null) {
      return <FormArray>this._ProfileFormService.taxRegistrationForm!.get('taxRegistrationAuthorisedSignatoryDetails');
    } else {
      return this.fb.array([]);
    }
  }
  
getFormControl() {
    return this.authorisedSignatoryDetailRef.controls as FormGroup[];
  }

  addItem() {
    // push object that you need to be added into array
    this.form = this._ProfileFormService.setAuthorisedSignatoryDetailForm(new TaxRegistrationAuthorisedSignatoryDetail());
    this.authorisedSignatoryDetailRef.push(this.form);
  }

Answer 1

您需要跟踪当前面板，因此添加属性来跟踪当前活动/打开的面板的索引。

示例：

activePanelIndex: number = -1; // -1 bcs you start with no panel as active

addItem() {
  this.form = this._ProfileFormService.setAuthorisedSignatoryDetailForm(new TaxRegistrationAuthorisedSignatoryDetail();
  this.authorisedSignatoryDetailRef.push(this.form);
  this.activePanelIndex = this.authorisedSignatoryDetailRef.length - 1; //  there you can set your latest panel as it is active
}

并在 HTML 中添加 activePanelIndex

<mat-expansion-panel *ngFor="let detailForm of getFormControl(); let i = index" [expanded]="i === activePanelIndex" class="expansion-panel" hideToggle>
<mat-expansion-panel-header>