清晰度数据网格未在角度应用程序中对齐列

Question

简单的入门应用程序，具有清晰的1.0.0版本。尝试显示datagrid时，以下内容无法使行中的所有列对齐。

<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，正在运行。