在Angular 7中，可以使用Mat Table来实现可展开行的效果。以下是一个包含代码示例的解决方法：

1. 首先，确保已经安装了Angular Material库。可以通过运行以下命令来安装它：

npm install --save @angular/material @angular/cdk @angular/animations

2. 在app.module.ts文件中导入所需的模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatTableModule,
    MatExpansionModule
  ],
  // ...
})
export class AppModule { }

3. 在组件的HTML模板中，使用Mat Table和Mat Expansion来创建可展开行的表格。例如：

    
    


  
  
Name
    
{{row.name}}
  

  
  

      

        

        

          {{element.description}}
        
      
    
  

  
  

  

  

4. 在组件的CSS文件中，定义展开行的样式：

.example-element-row {
  cursor: pointer;
}

.example-expanded-row {
  background: rgba(0, 0, 0, 0.1);
}

.example-detail-row {
  background: rgba(0, 0, 0, 0.1);
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

.example-element-diagram {
  width: 100px;
  height: 100px;
  background: #555;
}

.example-element-description {
  padding: 16px;
}

5. 在组件的TypeScript文件中，定义数据源和显示的列，并在初始化时设置初始展开的行：

import { Component } from '@angular/core';

export interface Element {
  name: string;
  description: string;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  displayedColumns: string[] = ['name'];
  dataSource: Element[] = [
    { name: 'Element 1', description: 'Description 1' },
    { name: 'Element 2', description: 'Description 2' },
    { name: 'Element 3', description: 'Description 3' }
  ];
  expandedElement: Element | null;

  constructor() {
    this.expandedElement = this.dataSource[0];
  }
}

以上是使用Angular 7中的Mat Table实现可展开行的解决方法。你可以根据自己的需求进行修改和调整。