Angular 如何捕获 mat-tab 更改事件

Question

在这里，我需要将 tab.staffMemberId 发送到服务并获取值并填充 matInput 值。当标签更改时，我需要将Tab.staffmemberId发送到服务

<mat-tab-group>
<mat-tab *ngFor="let tab of StaffMemberList; let index = index" [label]="tab.staffMemberId">
{{tab.id}}
<mat-grid-list cols="3" rowHeight="8:1">
    <mat-grid-tile>
      <mat-form-field class="full-width">
        <input matInput placeholder="Position" >
      </mat-form-field>
    </mat-grid-tile>
</mat-grid-list>

Answer 1

你可以这样做

 <mat-tab-group  [(selectedIndex)]="selectedTabIndex" (selectedTabChange)="onTabChanged($event);">
      <mat-tab formArrayName="staffMembers" #pft  *ngFor="let staffMember of formData.get('staffMembers').controls; let i = index">
        <div [formGroupName]="i">
          <ng-template mat-tab-label>
            {{staffMember.controls.staffMemberId.value}} <a>
          </a>
          </ng-template>
            <div class="form-group">
              <label for="name"> Name</label>
              <input type="text" class="form-control" id="name" formControlName="name">
           </div> 
        </div>
    </mat-tab>
 </mat-tab-group>

并在组件中像这样为员工成员创建 FormArray

formData: FormGroup = this.formBuilder.group({
    staffMembers: this.formBuilder.array([this.createItem()])

 }

在选项卡更改上，您可以分配值以形成数组

 createItem(): FormGroup {
    return this.formBuilder.group({
      staffMemberId: ['',],
      name: ['',],

    });
  }
   addItem(): void {
    this.projectFundingItems = this.formProjectGeneralData.get('staffMembers') as FormArray;
    this.projectFundingItems.push(this.createItem());
  }


  onTabChanged($event) {
    let clickedIndex = $event.index;
    let length = (<FormArray>this.formData.controls['staffMembers']).length;
    if (clickedIndex === length) {
      if ((<FormArray>this.formData.controls['staffMembers']).at(length - 1).dirty) {
        this.addItem();
        this.selectedTabIndex = clickedIndex - 1;
      } else {
        if (this.formData.staffMembers.length === clickedIndex) {
          this.addItem();
        }
        this.selectedTabIndex = clickedIndex - 1;
      }
    }
  }

Answer 2

它从索引 0 开始到您创建的选项卡数。

在你的 html

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

在组件中使用此代码

tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
    console.log('tabChangeEvent => ', tabChangeEvent); 
    console.log('index => ', tabChangeEvent.index); 
}

这应该没问题。