带有可展开行的 Angular (7+) 材料表 - 同时包含多个展开行

Question

>我正在使用带有可展开行的材料表

我想在单击行时扩展多行。默认行为是在单击新行时关闭以前展开的行。我不希望关闭以前的，每个都应该保持打开状态，直到再次单击。我该怎么做？

Answer 1

这是另一种方法。

只需将变量设置为数组即可

expandedElement: PeriodicElement[] = [];

在动画部分使用函数而不是直接检查

[@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'"

并在添加类时使用相同的函数

[class.example-expanded-row]="checkExpanded(element)"

然后单击进行函数调用。如果元素存在，请将其从数组中删除，如果不存在，则添加它

(click)="pushPopElement(element)"

以下是使用的 2 个函数。请随时提高方法的效率。这是一种在短时间内为演示编写的粗略方法。

checkExpanded(element): boolean {
let flag = false;
this.expandedElement.forEach(e => {
if(e === element) {
flag = true;
}
});
return flag;
}
pushPopElement(element) {
const index = this.expandedElement.indexOf(element);
console.log(index);
if(index === -1) {
this.expandedElement.push(element);
} else {
this.expandedElement.splice(index,1);
}
}

您可以在此处找到工作示例：https://stackblitz.com/edit/angular-x6jz81

Answer 2

为此，您必须在数据源中添加一个属性，如expanded:true，然后在行单击时更改 ，在数据源中切换此属性，并根据此属性更改 HTML 中的类以进行扩展。

工作演示

添加了代码片段，以防链接断开。

const ELEMENT_DATA: PeriodicElement[] = [
{
...
expanded: false
},
{
...
expanded: false
}
]

单击该行时，只需切换expanded属性(不需要循环(，还可以基于相同的expanded属性添加类。

<div class="example-element-detail"
[@detailExpand]="element.expanded ? 'expanded' : 'collapsed'">
...
</div>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
[class.example-expanded-row]="element.expanded"
(click)="element.expanded = !element.expanded">
</tr>