具有不同高度的子行（嵌套细胞）角材料表(Angular Material table with su

我想创建一个嵌套的细胞模仿子行的表。如果每一个细胞的含量不超过嵌套单元（A）的最小高度属性值，它工作正常。

不幸的是超过此值时，表坏了（B）。有没有简单的方法*正确对准嵌套细胞获得像（C）表？

代码： https://stackblitz.com/edit/angular-aejwfm

（*）我知道，我们可以使用JavaScript来设置代表某些子行到最大（从子行的所有单元格的高度）的所有单元格的高度，但我更喜欢纯HTML / CSS /角度的解决方案。

一个可能的解决方案是，你可以创建一个指令，查找具有最大高度为每一行电池和相同的高度适用于该行的所有单元格。

但你，所以你需要提供一些信息，以利用该指令可以识别单个行的电池指令渲染数据列老虎钳。

我已经更新了你的代码，以达到预期的效果。

https://stackblitz.com/edit/angular-aejwfm-6htvuk

这里是我做给你演示变化的简要说明：

创建一个指令，它接受book对象作为输入。这本书的对象将帮助我们确定单行的细胞。

@Directive({
  selector: '[matchCellHeight]'
})
export class MatchCellHeightDirective {

  @Input() matchCellHeight: any;

  constructor(private el: ElementRef) { 

  }
}

然后绑定这个指令给每个电池单元在您的模板。

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
      <mat-cell *matCellDef="let genre">
        <mat-cell [matchCellHeight]='book' *ngFor="let book of genre.books"> //bind matchCellHeight to each cell
           {{book.title}} 
        </mat-cell>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="pages">
      <mat-header-cell *matHeaderCellDef> Pages </mat-header-cell>
      <mat-cell *matCellDef="let genre">
        <mat-cell [matchCellHeight]='book' *ngFor="let book of genre.books">
           {{book.pages}} 
        </mat-cell>
      </mat-cell>
    </ng-container>

现在，我们需要存储每个单元格的引用某个地方，这样我们就可以应用在每个单元我们的比赛高度的逻辑。为此，我已创建了一个服务，并在指令注入它。

@Injectable()
export class MatchCellHeightService{
  cells:{el:ElementRef,data:any}[] = [];
  constructor(){

  }

  findUniqueBooks():any[]{
    return this.cells.map(currCell => currCell.data).reduce(
      (acc,curr) => {
        if(acc){
          if(acc.indexOf(curr) == -1){
            acc.push(curr);
          }
        }else{
          acc = [].push(curr)
        }
        return acc;
      },[]
    )
  }

  matchHeight(){
    /* first find all the unique books*/
    let books = this.findUniqueBooks();


    for(let i = 0; i < books.length ; i++){
      let currbook = books[i];

      /*for each book find cells that containins this book object info
        (in this demo each row is containng info about one book there for we are using book object 
        to identify cells of each row)
      */
      let bookCells:{el:ElementRef,data:any}[] = [];

        for(let j = 0; j < this.cells.length ; j++){
          let currCell = this.cells[j];
          if(currCell.data == currbook){
            bookCells.push(currCell);
          }
        }

        /*once we have the array of cells which are of same row apply the match height logic*/
        bookCells.forEach(val => val.el.nativeElement.style.height = 'initial');
        let maxHeight = Math.max(...bookCells.map(val => val.el.nativeElement.offsetHeight));
        bookCells.forEach(currCell => {
          currCell.el.nativeElement.style.height = maxHeight+'px';
        })
    }
  }
}

我希望这将有所帮助。而且我还发现，做同样的作业指令的另一种实现方式。这里是链接了点。 https://scotch.io/tutorials/responsive-equal-height-with-angular-directive