数据源Mat-Cell高度和数据

Question

我对数据源mat-cell及其内部的数据有疑问。

• 第1步：我发送http请求以获取第一个数据。
• 第2步：我从第1步的数据中发送另一个带有某些参数的http请求。

问题在于我在第2步中获得的数据。数据超出了Mat-cell，而且不是很漂亮。我的问题的屏幕：

  

将所有项目显示在第3列中的最佳解决方案是什么？

非常感谢！

编辑：我使用此CSS代码在Mat-cell内添加滚动条

.mat-row {
    min-height: 72px !important;

    .mat-cell:nth-child(3) {
        height: 68px !important;
    }

    .mat-cell:nth-child(3):hover {
        overflow-y: scroll;
    }
}

Answer 1

您没有发布无济于事的代码，但是如果您希望表散布得更多并且用户水平滚动，则可以对每列或某些列执行此操作：

<section class='tableSection'>

    <mat-table class="matTable" [dataSource]="dataSource">

当然，您可以使用样式表和CSS类来完成更多工作。

Stackblitz Mat Table

.tableSection {
    display: block;
    width: 100%;
    overflow-x: auto;
}

.matTable {
    width: 40em;
    overflow: scroll;
}

.mat-header-cell{
  text-align: left;
  background-color: lightgray;
}

.mat-cell {
  text-align: left;
}

在样式表中：

Option(Seq("hello", "Scala", "!")) match {
      case Some(x) => x.filter(_.charAt(0).isUpper)
      case None => Seq()
    }