Angular 每个记录有多行的角度材质表

我想使用

角度材质

表来显示数据库表中的记录

问题是每条记录上有很多字段，我的要求是在3个不同的表行上显示每条记录，如下所示：

       <table>
            <tr>
            <td class="tableHeader">Order<br/>Number</td>
            <td class="tableHeader"> Order<br/>Date</td> 
            <td class="tableHeader"> Line<br/>Number</td> 
            <td class="tableHeader"> Event<br/>Timestamp</td> 
            <td class="tableHeader"> Event<br/>Reason</td> 
            <td class="tableHeader"> Segment</td> 
            <td class="tableHeader"> Carrier Code</td> 
            <td class="tableHeader"> Origin</td> 
            <td class="tableHeader"> Destination<br/>Type</td> 
            <td class="tableHeader"> Destination<br/>Value</td> 
            <td class="tableHeader"> Ship<br/>Complete</td> 
            <td class="tableHeader"> Associated<br/>Order</td> 
            <td class="tableHeader"> Associated<br/>Order line</td> 
        </tr>
        <tr>        
            <td class="tableHeader"> Iteration<br/>Count</td>
            <td class="tableHeader"> MDS Seq</td> 
            <td class="tableHeader"> Movement<br/> Days</td> 
            <td class="tableHeader"> Pricing<br/> Hours</td> 
            <td class="tableHeader"> Ats MDS</td> 
            <td class="tableHeader"> Ats Processing<br/> Hours</td> 
            <td class="tableHeader"> Ats Transit<br/> Hours</td> 
        </tr>
        <tr>
        <td>    
            <td class="tableHeader"> (Final)<br/> Ship Date</td> 
            <td class="tableHeader"> (Final)<br/> Delivery Date</td> 
            <td class="tableHeader"> Start<br/> Date</td> 
            <td class="tableHeader"> Repromise<br/> Date</td> 
        </tr> 
        <tr>   
            <td class="tableHeader"> Orig<br/> delv Date</td> 
            <td class="tableHeader"> Orig<br/> ship Date</td> 
            <td class="tableHeader"> Nb Date</td> 
            <td class="tableHeader">Cust<br/> Spec</td> 
            <td class="tableHeader"> Consolidation</td> 
            <td class="tableHeader"> Holiday</td> 
            <td class="tableHeader"> No Ship</td> 
            <td class="tableHeader"> Max<br/> Iteration</td> 
            <td class="tableHeader"> Orde<br/>Cut Off</td> 
            <td class="tableHeader"> Rele<br/> Cut Off</td> 
            <td class="tableHeader"> Credit<br/>Code</td>
        </tr> 
       </table>

订单号
订单日期
行数
事件
时间戳
事件原因
段
载波码
起源
目的地
类型
目的地
值
装运
完成
关联的
订单
关联的
订单行
迭代
计数
MDS Seq
移动
天
定价
小时
Ats MDS
Ats处理
小时
Ats运输
小时
（最终）
装运日期
（最终）
交付日期
开始日期
重新指定日期
原始日期
原始装运日期
Nb日期
客户
规格
巩固
假日
没有船
最大迭代次数
顺序
切断
释放
切断
信用
代码

因此，每个记录有3个html表行

我找不到任何跨越多行的材质表示例

我可以在没有角度材质表的情况下轻松完成这项工作，但我想从使用

mat paginator

和排序之类的工具中获益，如果我使用mat table，这会更容易

---

有什么想法吗？

因为您没有制作表格，所以应该避免使用表格来显示非表格内容。。。此外，排序和分页很容易集成到您的自定义组件中，也许您应该创建一个？什么意思？我不是在创建表。它是一个表，除了记录跨越3行之外，因为它不能在一行中容纳所有记录，在您的示例中，

field1

与

field16

和

field31

相同？列标题将它们描述为同一字段；这是真的吗？没有，每个字段都是不同的，例如：帐户编号、名称、描述、地址等。。。。因此，使用MatTable上的

multiTemplateDataRows

选项，总共有40多个标题列要显示。然后，可以在模板中为每个数据行使用多个。