0

我有一个带有可扩展行的垫子表。在每个展开的行中，我有另一个垫子表。我可以在外表上使用 (focusin) 事件，但在内表（展开行内）上，focusin 不起作用。基本上我无法专注于展开区域。有人可以帮忙解决这个问题吗？

 <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
      <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>
    
      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="4">
          <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <table mat-table [dataSource]="dataSource2">
    
              <!-- Position Column -->
              <ng-container matColumnDef="position">
                <th mat-header-cell *matHeaderCellDef> No. </th>
                <td mat-cell *matCellDef="let element2"> {{element2.position}} </td>
              </ng-container>
    
              <!-- Name Column -->
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> Name </th>
                <td mat-cell *matCellDef="let element2"> {{element2.name}} </td>
              </ng-container>
    
              <!-- Weight Column -->
              <ng-container matColumnDef="weight">
                <th mat-header-cell *matHeaderCellDef> Weight </th>
                <td mat-cell *matCellDef="let element2"> {{element2.weight}} </td>
              </ng-container>
    
              <!-- Symbol Column -->
              <ng-container matColumnDef="symbol">
                <th mat-header-cell *matHeaderCellDef> Symbol </th>
                <td mat-cell *matCellDef="let element2"> {{element2.symbol}} </td>
              </ng-container>
    
              <tr mat-header-row *matHeaderRowDef="columnsToDisplay2"></tr>
              <tr mat-row *matRowDef="let row2; columns: columnsToDisplay2;" (focusin)="Test2()"></tr>
            </table>
          </div>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element" (focusin)="Test1()">
      </tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>

在上面的代码中，调用 Test1 的焦点被触发，但调用 Test2 的焦点永远不会被触发。

4

0 回答 0