Angular 5表格行单次展开/折叠功能实现遇阻，寻求技术帮助

看起来你在混用两种不同的展开行实现方式，再加上一些语法小错误，导致功能没法正常工作。咱们一步步来把问题解决掉：

核心问题分析 #

• 重复的columns属性：第二个mat-row里重复写了columns: row; columns: ['expandedDetail']，这是无效语法，会让Angular解析出错
• 混用两种实现方案：你同时用了Angular Material原生的*matRowDef的when判断，又引入了第三方的matDetailRow指令，这两种方式不能混用，得二选一
• 模板变量错误：ng-template里的row.element应该是element（因为你定义的模板变量是let-element）
• 缺少动画定义：[@detailExpand]动画没有在组件中声明，要么补上动画定义，要么直接去掉动画逻辑

修复后的实现方案（用Angular Material原生方式） #

这种方式不需要依赖第三方指令，完全用Material原生API实现单行展开/折叠：

组件代码 #

先在组件里补上动画定义（如果需要动画效果），并维护好expandedElement变量：

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class YourComponent {
  expandedElement: any;
  displayedColumns = ['your-column-names']; // 替换成你实际的列名
  metadata: Observable<any>; // 你的元数据Observable

  getMetadata(description: string, capabilityId: string) {
    // 你的获取元数据逻辑
  }
}

模板代码 #

修正语法错误，移除第三方指令，统一用原生的*matRowDef实现：

<mat-table>
  <!-- 主数据行定义 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;" 
           matRipple 
           class="element-row" 
           [class.expanded]="expandedElement === row" 
           (click)="expandedElement = expandedElement === row ? null : row">
  </mat-row>

  <!-- 展开行定义 -->
  <mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row">
  </mat-row>

  <!-- 展开列的定义（占满整行） -->
  <mat-column-def name="expandedDetail">
    <mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
      <div [@detailExpand]="expandedElement === element ? 'expanded' : 'collapsed'" style="overflow: hidden">
        <div *ngFor='let team of metadata | async'>
          <ul>
            <li>Team Lead:  {{team.team_lead}}</li>
          </ul>
        </div>
        <!-- 把获取元数据的点击事件放在这里更合理 -->
        <button (click)="getMetadata(element.description, element.capability_id)">获取元数据</button>
      </div>
    </mat-cell>
  </mat-column-def>
</mat-table>

关键修正点说明 #

• 去掉了重复的columns属性，给展开行单独定义mat-column-def并设置colspan，让展开行占满整行宽度
• 修改点击逻辑：expandedElement = expandedElement === row ? null : row，实现点击同一行可以切换展开/折叠状态
• 修正模板变量引用：用expandedElement === element替代错误的row.element
• 移除了第三方的matDetailRow相关指令，避免和原生API冲突
• 如果不需要动画效果，可以直接删掉[@detailExpand]相关代码

可选样式优化 #

添加一点CSS让展开行的视觉效果更清晰：

.element-row {
  cursor: pointer;
}

.detail-row {
  height: 0;
}

.element-row.expanded {
  border-bottom-width: 0;
}

这样调整后，单行展开/折叠功能应该就能正常工作了。

内容的提问来源于stack exchange，提问作者r500