Impossible de lier 'clrDgField' car ce n'est pas une propriété connue de 'clr-dg-cell'

Question

Vous venez de commencer à utiliser VMWare Clarity - cool project! J'ai suivi les exemples sur l'ajout d'une grille de données et la liaison à une liste d'utilisateurs, mais j'obtiens cette erreur:

Impossible de lier 'clrDgField' car ce n'est pas une propriété connue de 'clr-dg- cellule'. 1. Si 'clr-dg-cell' est un composant Angular et qu'il a une entrée 'clrDgField', vérifiez qu'il fait partie de ce module.

modèle Html ressemble à ceci:

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

Component ressemble à ceci:

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(); 
    } 
} 

module fonction ressemble à ceci:

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

Module d'application a ceci:

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

Vous ne savez pas quoi d'autre ajouter pour se débarrasser de cette erreur? Je pensais qu'il aurait tout ce dont il avait besoin du module de clarté? Merci.

Answer 1

clrDgField devrait aller sur clr-dg-column éléments plutôt que clr-dg-cell. Vous pouvez jeter un oeil à l'exemple de code ici:

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

Answer 2

Vous devez changer comme ceci:

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

Avec clrDgField, vous obtenez par défaut de tri et de filtrage gratuitement.