Angular Material表格可展开行无法展开问题求助

嘿，我仔细扒了你的代码，发现几个关键问题导致展开行没正常显示，咱们逐个来修复：

1. DataSource返回的数据不对 #

你的TweetsDataSource里，明明已经把每个推文对象和对应的展开行标记对象（带detailRow属性）塞进了rows数组，但最后connect方法却返回了原始的tweets数组——这就导致表格根本没拿到包含展开行结构的数据。

修改tweets.datasource.ts里的connect方法：

connect(): Observable<Tweet[]> {
  const rows = [];
  this.tweets.forEach(element => rows.push(element, { detailRow: true, element }));
  console.log('dataset rows:')
  console.log(rows);
  return of(rows); // 这里改成返回处理后的rows数组，而非原tweets数组
}

2. 展开行判断函数缺少返回值 #

你的isExpansionDetailRow函数只是执行了判断逻辑，但没有把结果返回给表格，导致表格无法识别哪些行是展开行。

修改tweets-table.component.ts里的这个函数：

isExpansionDetailRow = (i: number, row: Object) => {
  return row.hasOwnProperty('detailRow'); // 加上return，返回判断结果
}

3. 额外验证（可选） #

修复上面两个问题后，你可以看控制台的dataset rows输出，应该能看到推文对象和带detailRow标记的对象交替出现。此时点击主行，展开行的动画和内容就应该正常显示了——因为现在表格能正确识别展开行，并且数据也包含了展开行所需的关联信息。

这些改动应该就能解决你遇到的问题啦！

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