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

从索引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); 
}

这应该可以满足您的需求。

Answer 2

您可以通过这种方式完成

lui

并为staffMember创建FormArray在组件中

 <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>

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

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

 }

Answer 3

像这样

 <mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">

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

3 个答案: