Угловая (7+) Таблица материалов с расширяемыми строками - несколько развернутых рядов одновременно

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 длярасширение.

Рабочая демоверсия