具有角度材料的角度为4的可扩展表格行

Question

如何在角材料表中使行可扩展？一个要求是我需要使用角度材料表.我也更喜欢将材料手风琴用于此处提供的信息.

我想点击行并显示每列的不同信息.我正在寻找类似下面的东西.如果单击第1行,则第2行和第3行将显示不同的数据.

Answer 1

如前所述这里由安德鲁·塞甘这已经是现成的可行性:使用when谓词.

请参阅此示例:https://stackblitz.com/edit/angular-material-expandable-table-rows(thx to Lakston)

在mat-table标记内部,您必须使用mat-row带有matRipple指令的组件.单击某行时,行元素将分配给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');

如果要为每一行都有一个展开的视图,则必须为每一行添加一个"ExpansionDetailRow",detailRow如下所示:

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

如果要将rows变量记录到控制台输出,它将如下所示:

编辑:使用指令的完整示例

Mat Table可扩展行(排序,分页和过滤)

Answer 2

开箱即用是不可能的，但是您可以用一些自定义代码解决它。看一下这个讨论和这个解决方案（不是我的，而是这个答案的基础）。

简而言之：使用材料表并将单击方法添加到行中：

<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";
    }
}