Question

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

Answer 1

这是另一种方法。

只需将变量设置为数组

expandedElement: PeriodicElement[] = [];

在动画部分，使用函数代替直接检查

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

并在添加类时使用相同的功能

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

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

(click)="pushPopElement(element)"

这是使用的两个功能。请随时提高方法的效率。这是在短时间内为演示编写的粗略方法。

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。

Working Demo

具有可扩展行的Angular（7+）材质表-同时包含多个扩展行

2 个答案: