Angular 无法展开行

我试图显示一个表，并在单击行以显示一些附加信息时展开这些行

我有以下HTML/TS显示该表，没有问题，但当我添加连接代码时，行不会在单击时做出反应，并且在控制台中将行打印为“[]”

Html:

名称
{{apptestlist.Name}
应用程序计数
{{apptestlist.Apps.length}
{{apptestlist.Name}}的符号是香蕉

TS:

从'@angular/core'导入{Component，OnInit}；
从“../services/app test list service”导入{AppTestListService}
从“../models/AppTestList”导入{AppTestList}；
从“@angular/cdk/table”导入{DataSource}；
从'rxjs'导入{可观察的}；
从“@angular/animations”导入{动画、状态、样式、转换、触发器}；
@组成部分({
选择器：“应用程序测试列表”，
templateUrl:'./应用程序测试列表.component.html'，
styleUrls:['./应用程序测试列表.component.css']，
动画：[
触发器（'detailExpand'[
状态（'collapped'，样式（{height:'0px'，minHeight:'0'，可见性：'hidden'}）），
状态（'expanded'，样式（{height:'*'，可见性：'visible'}）），
过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”，
]),
],
})
导出类ApplicationTestListComponent实现OnInit{
构造函数（私有appTestListService:appTestListService）{}
dataSource=新的AppTestListDataSource（this.appTestListService）；
displayedColumns=['Name'，'AppCount']；
AppTestList:AppTestList[]；
加载=真；
isExpansionDetailRow=（i:number，row:Object）=>row.hasOwnProperty（'detailRow'）；
膨胀元素：任何；
恩戈尼尼特（）{
}
}
导出类AppTestListDataSource扩展了DataSource

我希望能够展开行并显示一些附加信息，例如

<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let apptestlist"> 
    The symbol for {{apptestlist.Name}} is Banana
  </mat-cell>
</ng-container>


{{apptestlist.Name}}的符号是香蕉

但是它不起作用

我已将connect方法更改为以下内容，但在发生任何更改之前，它似乎会返回：

  connect(): Observable<AppTestList[]> {
    const rows = [];
    let data = this.appTestListService.list();
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    console.log(rows);
    return of(rows);
  }

connect（）：可观察{
常量行=[]；
让data=this.appTestListService.list（）；
forEach（element=>rows.push（element，{detailRow:true，element}））；
console.log（行）；
返回（行）；
}

列表（）：

public list（）：可观察{
返回此.httpClient
.get（`this.url}/${this.endpoint}`）；
}
因为
AppTestListService.list（）
返回一个带有或不带记录的
可观察的
，它最初被分配给
数据
变量和
forEach
，
控制台.log
和
返回（行）
在您的
.get
检索完记录之前完成

您需要将该部分包装在订阅中，以确保当您知道您拥有来自
.get

另请注意：

{{apptestlist.Name}
对您的详细信息行没有任何意义，您可能需要
{{apptestlist.element.Name}

connect（）：Observable
您能发布
AppTestListService.list（）的代码吗？
？我会很快更新它-.list（）返回一个Observable，它可以通过http访问远程端点。。
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let apptestlist"> 
    The symbol for {{apptestlist.Name}} is Banana
  </mat-cell>
</ng-container>

  connect(): Observable<AppTestList[]> {
    const rows = [];
    let data = this.appTestListService.list();
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    console.log(rows);
    return of(rows);
  }

  public list(): Observable<AppTestList[]> {
    return this.httpClient
      .get<AppTestList[]>(`${this.url}/${this.endpoint}`);
  }

connect(): Observable<AppTestList[]> {
       const rows = [];
       this.appTestListService.list().subscribe(val=>{
         val.forEach(element => rows.push(element, { detailRow: true, element }));
       })
       return of(rows);
     }