Angular Can'；t绑定到'；clrDgField'；因为它不是'；t'的已知属性；clr dg电池'；

刚刚开始使用VMWare Clarity-酷项目！我遵循了添加数据网格和绑定到用户列表的示例，但出现了以下错误：

无法绑定到“clrDgField”，因为它不是“clr dg cell”的已知属性。 1.如果“clr dg cell”是一个角度组件，并且具有“clrDgField”输入，则验证它是否是该模块的一部分

Html模板如下所示：

<clr-datagrid>

  <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>Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell [clrDgField]="'firstName'">{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'lastName'">{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'email'">{{user.email}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'createdDate'">{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ClarityModule } from 'clarity-angular';

import { SecurityRoutingModule } from './routing/security.routing.module';

import { MaintainUsersComponent } from './components/maintain.users.component';

import { SecurityService } from './services/security.service';

@NgModule({
  imports: [CommonModule, ClarityModule, SecurityRoutingModule],

  declarations: [MaintainUsersComponent],

  providers: [SecurityService],
})

export class SecurityModule { }

<clr-datagrid>

  <clr-dg-column [clrDgField]="'firstName'">First Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'lastName'">Last Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'email'">EMail</clr-dg-column>
  <clr-dg-column [clrDgField]="'createdDate'">Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell>{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell>{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

功能模块如下所示：

<clr-datagrid>

  <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>Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell [clrDgField]="'firstName'">{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'lastName'">{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'email'">{{user.email}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'createdDate'">{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ClarityModule } from 'clarity-angular';

import { SecurityRoutingModule } from './routing/security.routing.module';

import { MaintainUsersComponent } from './components/maintain.users.component';

import { SecurityService } from './services/security.service';

@NgModule({
  imports: [CommonModule, ClarityModule, SecurityRoutingModule],

  declarations: [MaintainUsersComponent],

  providers: [SecurityService],
})

export class SecurityModule { }

<clr-datagrid>

  <clr-dg-column [clrDgField]="'firstName'">First Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'lastName'">Last Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'email'">EMail</clr-dg-column>
  <clr-dg-column [clrDgField]="'createdDate'">Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell>{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell>{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

应用程序模块具有以下功能：

 imports: [
      BrowserModule,
      HttpClientModule,
      ClarityModule.forRoot(),

---

不确定还要添加什么来消除此错误？我以为它会拥有清晰模块所需要的一切？谢谢。

clrDgField

应该在

clr-dg列

元素上，而不是

clr-dg单元

。您可以在此处查看示例代码：

---

您应该这样更改：

<clr-datagrid>

  <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>Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell [clrDgField]="'firstName'">{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'lastName'">{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'email'">{{user.email}}</clr-dg-cell>
    <clr-dg-cell [clrDgField]="'createdDate'">{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ClarityModule } from 'clarity-angular';

import { SecurityRoutingModule } from './routing/security.routing.module';

import { MaintainUsersComponent } from './components/maintain.users.component';

import { SecurityService } from './services/security.service';

@NgModule({
  imports: [CommonModule, ClarityModule, SecurityRoutingModule],

  declarations: [MaintainUsersComponent],

  providers: [SecurityService],
})

export class SecurityModule { }

<clr-datagrid>

  <clr-dg-column [clrDgField]="'firstName'">First Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'lastName'">Last Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'email'">EMail</clr-dg-column>
  <clr-dg-column [clrDgField]="'createdDate'">Capture Date</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
    <clr-dg-cell>{{user.firstName}}</clr-dg-cell>
    <clr-dg-cell>{{user.lastName}}</clr-dg-cell>
    <clr-dg-cell>{{user.email}}</clr-dg-cell>
    <clr-dg-cell>{{user.createdDate | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
    of {{pagination.totalItems}} users
    <clr-dg-pagination #pagination [clrDgPageSize]="50"></clr-dg-pagination>
  </clr-dg-footer>

</clr-datagrid>

名字
姓
电子邮件
捕获日期
{{user.firstName}
{{user.lastName}
{{user.email}
{{user.createdDate | date}
{{pagination.firstItem+1}}-{{pagination.lastItem+1}
{{pagination.totalItems}}用户数

使用

clrDgField

，您可以免费获得默认排序和筛选