Невозможно выполнить привязку к «clrDgField», так как это неизвестное свойство «clr-dg-cell».

Только начал использовать VMWare Clarity - классный проект! Я следовал примерам добавления сетки данных и привязки к списку пользователей, но получаю эту ошибку:

Невозможно выполнить привязку к «clrDgField», так как это неизвестное свойство «clr-dg-cell». 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(),

Не знаете, что еще добавить, чтобы избавиться от этой ошибки? Я думал, у него будет все, что нужно от модуля ясности? Спасибо.


angular vmware-clarity
person TRex    schedule 12.09.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

clrDgField должен идти на clr-dg-column элементах, а не на clr-dg-cell. Вы можете взглянуть на пример кода здесь:

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

person Jeeyun    schedule 12.09.2017

arrow_upward
0
arrow_downward

Вы должны измениться следующим образом:

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

С clrDgField вы получаете сортировку и фильтрацию по умолчанию бесплатно.

person Soumya Kanti    schedule 14.09.2017