3

展開可能な行を持つマテリアル テーブルを使用しています

行のクリックで複数の行を展開したいと思います。デフォルトの動作では、新しい行をクリックすると、以前に展開された行が閉じられます。前のものを閉じたくないので、もう一度クリックするまでそれぞれを開いたままにしておく必要があります。これどうやってするの？

4

2 に答える 2

4

ここに別のアプローチがあります。

変数を配列にするだけです

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

于 2019-09-23T07:38:17.853 に答える