清晰度数据网格未对齐 angular 应用中的列

Question

清晰度为 1.0.0 的简单入门应用。尝试显示数据网格时，以下内容无法跨行对齐任何列。

<clr-datagrid>
  <clr-dg-column>ID</clr-dg-column>
  <clr-dg-column>First Name</clr-dg-column>
  <clr-dg-column>Last Name</clr-dg-column>
  <clr-dg-column>Email</clr-dg-column>
  <clr-dg-column>Gender</clr-dg-column>
  <clr-dg-column>IP Address</clr-dg-column>
  <clr-dg-column>Department</clr-dg-column>

  <clr-dg-row *clrDgItems="let employee of employees">
    <clr-dg-cell>{{employee.id}}</clr-dg-cell>
    <clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
    <clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
    <clr-dg-cell>{{employee.email}}</clr-dg-cell>
    <clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
    <clr-dg-cell>{{employee.department}}</clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer><clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="10">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Employees per page</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}} users
    </clr-dg-pagination>
  </clr-dg-footer></clr-dg-footer>
</clr-datagrid>

Answer 1

您似乎声明了一个额外的列，但没有对应的单元格。这应该适合你。

    <clr-datagrid>
      <clr-dg-column>ID</clr-dg-column>
      <clr-dg-column>First Name</clr-dg-column>
      <clr-dg-column>Last Name</clr-dg-column>
      <clr-dg-column>Email</clr-dg-column>
      <clr-dg-column>Gender</clr-dg-column>
      <clr-dg-column>IP Address</clr-dg-column>
      <clr-dg-column>Department</clr-dg-column>

      <clr-dg-row *clrDgItems="let employee of employees">
        <clr-dg-cell>{{employee.id}}</clr-dg-cell>
        <clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
        <clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
        <clr-dg-cell>{{employee.email}}</clr-dg-cell>
<clr-dg-cell>{{employee.gender}}</clr-dg-cell>
        <clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
        <clr-dg-cell>{{employee.department}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>

这是一个stackblitz运行。

清晰度数据网格未对齐 angular 应用中的列

clarity datagrid not aligning columns in angular app

datagrid

vmware-clarity