Angular (7+) Material table with expandable rows - 同时有多个扩展行
Angular (7+) Material table with expandable rows - multiple expanded rows at the same time
我正在使用Material table with expandable row
我想在点击行时展开多行。默认行为是在单击新行时关闭先前展开的行。我不希望之前的那些被关闭,每个都应该保持打开状态,直到再次点击。我该怎么做?
为了实现这一点,您必须在数据源中添加一个属性,如 expanded:true
,然后在行上单击更改,在数据源中切换此 属性,并基于此属性 更改 HTML 中的 class 以进行扩展。
添加代码片段以防 link 中断。
const ELEMENT_DATA: PeriodicElement[] = [
{
...
expanded: false
},
{
...
expanded: false
}
]
点击该行,只需切换expanded
属性(不需要循环),同时添加class基于相同的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>
这是另一种方法。
简单的把变量做成数组
expandedElement: PeriodicElement[] = [];
在动画部分使用函数而不是直接检查
[@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'"
并在添加 class
时使用相同的函数
[class.example-expanded-row]="checkExpanded(element)"
然后单击进行函数调用。如果该元素存在,则将其从数组中移除,如果不存在,则添加它
(click)="pushPopElement(element)"
这是使用的 2 个函数。请随时提高方法的效率。短时间写的粗略的方法,给demo用
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
我正在使用Material table with expandable row
我想在点击行时展开多行。默认行为是在单击新行时关闭先前展开的行。我不希望之前的那些被关闭,每个都应该保持打开状态,直到再次点击。我该怎么做?
为了实现这一点,您必须在数据源中添加一个属性,如 expanded:true
,然后在行上单击更改,在数据源中切换此 属性,并基于此属性 更改 HTML 中的 class 以进行扩展。
添加代码片段以防 link 中断。
const ELEMENT_DATA: PeriodicElement[] = [
{
...
expanded: false
},
{
...
expanded: false
}
]
点击该行,只需切换expanded
属性(不需要循环),同时添加class基于相同的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>
这是另一种方法。
简单的把变量做成数组
expandedElement: PeriodicElement[] = [];
在动画部分使用函数而不是直接检查
[@detailExpand]="checkExpanded(element) ? 'expanded' : 'collapsed'"
并在添加 class
时使用相同的函数[class.example-expanded-row]="checkExpanded(element)"
然后单击进行函数调用。如果该元素存在,则将其从数组中移除,如果不存在,则添加它
(click)="pushPopElement(element)"
这是使用的 2 个函数。请随时提高方法的效率。短时间写的粗略的方法,给demo用
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