'clr-dg-cell'の既知のプロパティではないため、 'clrDgField'にバインドできません

Question

VMWare Clarityを使い始めたばかりです。私はデータグリッドを追加してユーザーのリストにバインドするサンプルを追跡しましたが、このエラーが発生します。

「clr-dg-細胞'。 1. 'clr-dg-cell'がAngularコンポーネントで、 '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 { Component, OnInit } from '@angular/core'; 
import { User } from '../types/user.type'; 
import { SecurityService } from '../services/security.service'; 

@Component({ 
    selector: 'app-maintain-users-component', 
    templateUrl: './maintain.users.component.html' 
}) 

export class MaintainUsersComponent implements OnInit { 

    public users: User[]; 

    constructor(private securityService: SecurityService) { 
    } 

    ngOnInit(): void { 
    this.users = this.securityService.getUsers(); 
    } 
} 

機能モジュールは、次のようになります。

：

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 { } 

アプリケーション・モジュールは、この持っています

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

このエラーを取り除くために何を追加するべきかわかりませんか？私はそれが透明度モジュールから必要なものすべてを持っていると思った？ありがとう。

Answer 1

clrDgFieldは、clr-dg-cellではなくclr-dg-columnの要素になります。あなたはここにサンプルコードを見てとることができます。

https://vmware.github.io/clarity/documentation/datagrid/binding-properties

Answer 2

は、あなたがこのように変更する必要があります。clrDgFieldで

<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> 

、あなたは自由のためのデフォルトのソートやフィルタリングを得ます。