web-dev-qa-db-fra.com

Impossible de se lier à 'value' car ce n'est pas une propriété connue de 'p-dataTable'

Je développe une application aspnetzero avec angular mais lorsque j'attribue la valeur de la propriété categories dans p-dataTable, j'obtiens cette erreur dans la console du navigateur:

Impossible de se lier à 'value' car ce n'est pas une propriété connue de 'p-dataTable'

J'ai trois fichiers. Premier fichier categories.component.ts

    import { Component, Injector, OnInit } from '@angular/core';
    import { AppComponentBase } from '@shared/common/app-component-base';
    import { appModuleAnimation } from '@shared/animations/routerTransition';


    import { Http, Response, Headers, RequestOptions } from "@angular/http";
    import { AppSessionService } from '@shared/common/session/app-session.service';
    import { Category } from './category';
    import { DataTableModule, SharedModule, DataTable } from 'primeng/primeng';


    @Component({
        templateUrl: './categories.component.html',
        animations: [appModuleAnimation()]
    })
    export class CategoriesComponent extends AppComponentBase implements OnInit {

        categories: Category[];

        constructor(
            injector: Injector,
            private http: Http,
            private appSessionService: AppSessionService
        ) {
            super(injector);
        }

        ngOnInit(): void {
            this.getCategories();
        }

        getCategories(): void {

            let headers = new Headers({ 'Content-Type': 'application/json' })
            headers.append('tenantId', this.appSessionService.tenant ? this.appSessionService.tenant.id.toString() : '-1');
            let options = new RequestOptions({ headers: headers });
            this.http.get('/api/categories', options).subscribe(values => {
                this.categories = values.json();
            });
        }
    }

Second categories.component.html

          <div [@routerTransition]>
           <div class="row margin-bottom-5">
              <div class="col-xs-12">
                  <div class="page-head">
                      <div class="page-title">
                          <h1>
                             <span>{{l("Categories")}}</span>
                         </h1>
                     </div>
                  </div>
              </div>
           </div>

        <div class="portlet light margin-bottom-0">
            <div class="portlet-body">
                <p-dataTable [value]="categories">
                    <p-column field="category.Name" header="Category"></p- column>
                </p-dataTable>
            </div>
        </div>
    </div>

et classe de catégorie

    export class Category {
        constructor(
            public id: number,
            public name: string) { }
    }

C'est app.module.ts

import { NgModule } from '@angular/core';
import * as ngCommon from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { ModalModule, TooltipModule, TabsModule } from 'ngx-bootstrap';
import { FileUploadModule } from '@node_modules/ng2-file-upload';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './shared/layout/header.component';
import { HeaderNotificationsComponent } from './shared/layout/notifications/header-notifications.component';
import { SideBarComponent } from './shared/layout/side-bar.component';
import { FooterComponent } from './shared/layout/footer.component';
import { LoginAttemptsModalComponent } from '@app/shared/layout/login-attempts-modal.component';
import { ChangePasswordModalComponent } from '@app/shared/layout/profile/change-password-modal.component';
import { ChangeProfilePictureModalComponent } from '@app/shared/layout/profile/change-profile-picture-modal.component';
import { MySettingsModalComponent } from '@app/shared/layout/profile/my-settings-modal.component';
import { SmsVerificationModalComponent } from '@app/shared/layout/profile/sms-verification-modal.component';
import { AbpModule } from '@abp/abp.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { AppCommonModule } from './shared/common/app-common.module';
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
import { ImpersonationService } from './admin/users/impersonation.service';
import { LinkedAccountService } from './shared/layout/linked-account.service';
import { LinkedAccountsModalComponent } from '@app/shared/layout/linked-accounts-modal.component';
import { LinkAccountModalComponent } from '@app/shared/layout/link-account-modal.component';
import { NotificationsComponent } from './shared/layout/notifications/notifications.component';
import { NotificationSettingsModalCompoent } from './shared/layout/notifications/notification-settings-modal.component';
import { UserNotificationHelper } from './shared/layout/notifications/UserNotificationHelper';
import { ChatBarComponent } from './shared/layout/chat/chat-bar.component';
import { ChatFriendListItem } from './shared/layout/chat/chat-friend-list-item.component';
import { ChatSignalrService } from '@app/shared/layout/chat/chat-signalr.service';
import { QuickSideBarChat } from '@app/shared/layout/chat/QuickSideBarChat';
import { DataTableModule } from 'primeng/primeng';
import { PaginatorModule } from 'primeng/primeng';

@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HeaderNotificationsComponent,
        SideBarComponent,
        FooterComponent,
        LoginAttemptsModalComponent,
        LinkedAccountsModalComponent,
        LinkAccountModalComponent,
        ChangePasswordModalComponent,
        ChangeProfilePictureModalComponent,
        MySettingsModalComponent,
        SmsVerificationModalComponent,
        NotificationsComponent,
        ChatBarComponent,
        ChatFriendListItem,
        NotificationSettingsModalCompoent
    ],
    imports: [
        ngCommon.CommonModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ModalModule.forRoot(),
        TooltipModule.forRoot(),
        TabsModule.forRoot(),
        FileUploadModule,
        AbpModule,
        AppRoutingModule,
        UtilsModule,
        AppCommonModule.forRoot(),
        ServiceProxyModule,
        DataTableModule,
        PaginatorModule
    ],
    providers: [
        ImpersonationService,
        LinkedAccountService,
        UserNotificationHelper,
        ChatSignalrService,
        QuickSideBarChat
    ]
})
export class AppModule { }
angularprimengaspnetboilerplate
6
redux17

J'ai corrigé cette erreur. Dans aspnnetzero, il faut importer deux fichiers DataTable. J'ai dû importer DataTable dans app/main/main.module.ts.

main.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './categories/categories.component';
import { CreateOrEditCagoryModalComponent } from './categories/create-or-edit-category-modal.component';

import { ModalModule, TabsModule, TooltipModule } from 'ngx-bootstrap';
import { AppCommonModule } from '@app/shared/common/app-common.module';
import { UtilsModule } from '@shared/utils/utils.module';
import { MainRoutingModule } from './main-routing.module';
import { CountoModule } from '@node_modules/angular2-counto';
import { EasyPieChartModule } from 'ng2modules-easypiechart';
import { DataTableModule } from 'primeng/primeng'; // Here
import { PaginatorModule } from 'primeng/primeng'; // Here

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ModalModule,
        TabsModule,
        TooltipModule,
        AppCommonModule,
        UtilsModule,
        MainRoutingModule,
        CountoModule,
        EasyPieChartModule,
        DataTableModule, // Added DataTableModule
        PaginatorModule //  Added PaginatorModule

    ],
    declarations: [
        DashboardComponent,
        CategoriesComponent,
        CreateOrEditCagoryModalComponent
    ]
})
export class MainModule { }
13
redux17

Si vous utilisez des modules de fonctionnalités pour le chargement paresseux, vous pouvez également obtenir cette erreur. Même si vous avez une déclaration dans app.module.ts. Vous devez également l'importer dans vos modules de fonctionnalités.

Exemple: vous avez un module de fonctionnalité appelé "pastorders". Ensuite, vous devez l'importer dans le fichier pastorders.module.ts comme ci-dessous

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {PastordersRoutingModule} from './pastorders-routing.module';
import { PastordersComponent } from './pastorders/pastorders.component';

import {DataTableModule} from 'primeng/primeng'; // Declare here

@NgModule({
  imports: [
    CommonModule,
    DataTableModule, // declare here 
    PastordersRoutingModule
  ],
  declarations: [PastordersComponent]
})
export class PastordersModule { }

En plus de la déclaration du fichier app.module.ts.

Remarque: Dans la dernière version de primeng (V5 et supérieure), il a été renommé "TableModule". vérifiez votre fichier package.json avant d'apporter des modifications.

4
Ragavan Rajan