web-dev-qa-db-ja.com

angular 4のangularマテリアルの展開可能なテーブル行

angularマテリアルテーブルで行をどのように展開可能にしますか？ 1つの要件は、 角度材料テーブル を使用する必要があることです。また、提供された情報に材料アコーディオンを使用することを好みます here 。

行をクリックして、列ごとに異なる情報を表示したい。以下のようなものを探しています。行1をクリックすると、行2と3が異なるデータで表示されます。

enter image description here

angularangular-material
23
Simon

here Andrew Seguinが述べたように、これはすぐに実行可能です。when述語を使用します。

この例を参照してください： https://stackblitz.com/edit/angular-material-expandable-table-rows （thx to Lakston）

demo

mat-tableタグの内部では、matRippleディレクティブとともにmat-rowコンポーネントを使用する必要があります。行をクリックすると、行要素がexpandedElement変数に割り当てられます。

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

しかし、ここで、展開された行を追加する必要があります。これはデフォルトでは非表示になっており、ユーザーが上の行をクリックすると表示されます。

<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

ここで重要なのは、すでに述べたwhen述語です。これは、コンポーネント自体で定義されているisExpansionDetailRow関数を呼び出し、行にdetailRowプロパティがあるかどうかを確認します。

isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');

RC0以降、最初のパラメータはインデックスです：

isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');

すべての行のビューを拡張したい場合は、次のようにすべての行のdetailRowプロパティで識別される「ExpansionDetailRow」を追加する必要があります。

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.Push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

rows変数をコンソール出力に記録する場合、次のようになります。

console output

編集：ディレクティブを使用した完全な例

マットテーブルの展開可能な行（ソート、ページネーション、フィルタリング）

71
Philipp Kief

すぐに使用することはできませんが、小さなカスタムコードで解決できます。 この議論 と この解決策 （私からではなく、この答えの根拠）を見てください。

要するに、材料テーブルを使用して、行にクリックメソッドを追加します。

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

拡張エリアのコンポーネントを追加します。 row_detail.htmlには、拡張領域にあるHTMLが含まれます。

@Component({
  selector: 'app-inline-message',
  templateUrl: 'row_detail.html',
  styles: [`
    :Host {
      display: block;
      padding: 24px;
      background: rgba(0,0,0,0.03);
    }
  `]
})
export class InlineMessageComponent {
  @Input() content1: string;
  @Input() content2: string;
}

テーブルが存在するコンポーネントでは、行を展開するメソッドが必要です。まず、これをコンポーネントに追加します...

expandedRow: number;
@ViewChildren('myRow', { read: ViewContainerRef }) containers;

...そしてメソッドを追加します：

/**
   * Shows the detail view of the row
   * @param {number} index
   */
expandRow(index: number, row: DataFromRowFormat) {

    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
    } else {
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1= "some text";
      messageComponent.instance.content2 = "some more text";
    }
}
5
Tobii

CDKがMaterial Tableに近いものを取得する唯一の方法であった場合、通常のテーブルでmd-rowを使用することは実行可能な代替手段でしたが、@angular/material 2.0.0-beta.12はCDKニーズに合った独自のデータテーブル。以下のドキュメントを参照してください。

https://material.angular.io/components/table/overview

1
Joshua Michael Calafell

Angular Materialを使用してこれを行う方法を次に示します。この例には、ページネーションと、「name」列にmat-sort-headerを使用した1つの例が含まれています。マットパジネーターをオーバーライドし、カスタムソートを実行して、ソート可能なときに展開可能な行がまだ親によって保持されていることを確認する必要がありました。この例では、一度に複数の行を開き、すべての行を閉じることもできます

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

1
Braden Brown