Question

我正在尝试在我的angular 8应用中实现分页，并为此使用了jw-pagination组件。实施时出现以下错误。

请在下面找到错误详细信息。

    Error occurs in the template of component HomeComponent.
src/app/components/home/home.component.html:50:28 - error NG8002: Can't bind to 'item' since it isn't a known property of 'jw-pagination'.
1. If 'jw-pagination' is an Angular component and it has 'item' input, then verify that it is part of this module.
2. If 'jw-pagination' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

50             <jw-pagination [item]="item" (changePage)="onChangePage($event)"></jw-pagination>
                              ~~~~~~~~~~~~~

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DefaultModule } from './layouts/default/default.module';

import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { JwPaginationComponent } from 'jw-angular-pagination';  // i have imported the new component.




@NgModule({
  declarations: [
    AppComponent,
    JwPaginationComponent
  ],
  imports: [
   BrowserModule,
   AppRoutingModule,
   DefaultModule,
   HttpClientModule,
   FormsModule,
   ReactiveFormsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CourseService } from '../../services/course.service';
import { UserService } from '../../services/user.service';
import { User } from '../../models/user';
import { Course } from '../../models/course';
import { Transaction } from '../../models/transaction';
import { Router } from '@angular/router';
import { DatePipe } from '@angular/common';
import * as data from './course.json';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  
  items = [];
  pageOfItems: Array<any>;

  constructor(private userService: UserService, private courseService: CourseService, private router: Router) {
    this.currentUser = this.userService.currentUserValue;
   }

  ngOnInit(): void {
    this.courseList = (data as any).default;
    this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}`}));
  }

  
  onChangePage(pageOfItems: Array<any>) {
    // update current page of items
    this.pageOfItems = pageOfItems;
}


}

home.component.html

<div class="container">
    <div class="alert alert-danger" *ngIf="errorMessage">
        <strong> Error!</strong> {{errorMessage}}
    </div>
    <div class="alert alert-success" *ngIf="infoMessage">
        <strong>Successfull!</strong>{{infoMessage}}
    </div>
    <div class="course-container">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col col-xs-6">
                        <h3 class="panel-title">All Courses</h3>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-stripped">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Course Name</th>
                            <th scope="col">Trainer</th>
                            <th scope="col">Category</th>
                            <th scope="col">Enroll</th>
                            <th scope="col">Detail</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of courseList; index as ind">
                            <th scope="row">{{ind + 1}}</th>
                            <td scope="row">{{item.courseName}}</td>
                            <td scope="row">{{item.trainer}}</td>
                            <td scope="row">{{item.category}}</td>
                            <td>
                                <button class="btn btn-info" (click)="enroll(item)">Enroll</button>
                            </td>
                            <td>
                                <button class="btn btn-success" (click)="detail(item)">Detail</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
        <div class="card-footer pb-0 pt-3">
            <jw-pagination [item]="item" (changePage)="onChangePage($event)"></jw-pagination>
        </div>
</div>

Answer 1

将JwPaginationModule导入到您的应用模块app.module.ts中，并将其添加到imports数组中。

Answer 2

导入 JwPaginationComponent 导入数组，而不是声明然后编写项目，而不是项目，您的HTML代码将如下所示

无法绑定到“ item”，因为它不是“ jw-pagination”的已知属性

2 个答案: