angular - 通过 TypeScript 展开 Angular Material 展开表行
问题描述
我正在使用我从文档中修改的 Angular Material 扩展数据表,here。进行更改时,我会刷新表中的数据。这工作正常,但表在刷新后会完全折叠到其默认状态,从而产生不良的用户体验。
我想在刷新后强制先前打开的行展开。无论如何,我还没有找到强制扩展 TypeScript 中的行。下面是我在发生表刷新时调用的方法:
refresh() {
this.refreshDatatable();
// I want to forcefully open the previously expanded row HERE.
}
任何帮助,将不胜感激!
解决方案
这是一个允许您扩展默认表格行的示例。我希望这能帮到您。您只需从先前在数据列表中打开的选项卡中检索索引。
TS:
export class TableExpandableRowsExample implements OnInit {
dataSource = ELEMENT_DATA;
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
expandedElement: PeriodicElement | null;
ngOnInit() {
this.expandedElement = ELEMENT_DATA[2];
}
}
HTML:
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
<div class="example-element-position"> {{element.position}} </div>
<div class="example-element-symbol"> {{element.symbol}} </div>
<div class="example-element-name"> {{element.name}} </div>
<div class="example-element-weight"> {{element.weight}} </div>
</div>
<div class="example-element-description">
{{element.description}}
<span class="example-element-description-attribution"> -- Wikipedia </span>
</div>
</div>
</td>
</ng-container>
演示:
推荐阅读
- ruby - 这段代码中的“sum = map[s[0]]”是什么意思?
- powerbi - 403 Forbidden,当我尝试调用 PowerBI API 推送数据集或获取所有工作区时
- python - 使用 Networkx 计算最短路径时出错
- android - java.lang.IllegalArgumentException:值“i”不是参考值 [proguard.evaluation.value.UnknownIntegerValue]
- javascript - 我想给每个渲染的 todo 元素一个 id
- javascript - 甚至在某些数组函数完成之前渲染的对象数组
- powershell - 在 PowerShell 中连接到 Exchange Online 时停止输出
- twilio - 获取使用通知 api 发送的短信
- linux - gcc:错误:无法识别的命令行选项
- .htaccess - apache2 config 将文件夹路径包含在 URL 中