Angular 6 ng-bootstrap评级不起作用

我尝试使用 Angular 6 ng-bootstrap Rating 但它对我不起作用，任何人都知道如何正确添加此评级，

NG-RATE

that is my code

facilitistatus.component.html

<ngb-rating [(rate)]="currentRate"></ngb-rating>

facilitistatus.component.ts

export class FacilitistatusComponent implements OnInit {

  currentRate = 8;
}

facilitistatus.component.css

/率/

.star {
  font-size: 1.5rem;
  color: #b0c4de;
}
.filled {
  color: #1e90ff;
}
.heart {
  position: relative;
  display: inline-block;
  font-size: 3rem;
  color: #d3d3d3;
}
.full {
  color: red;
}
.half {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  color: red;
}

错误是

core.js：1598 ERROR错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到'rate'，因为它不是'ngb-rating'的已知属性 . 1.如果'ngb-rating'是一个Angular组件并且它有'rate'输入，那么请确认它是该模块的一部分 . 2.如果'ngb-rating'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” . （“] [（rate）] =”currentRate“>

app.module.ts

import * as $ from 'jquery';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { CommonModule, LocationStrategy, HashLocationStrategy } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpClientModule, HttpClient } from '@angular/common/http';
    import { Routes, RouterModule } from '@angular/router';
    import { FullComponent } from './layouts/full/full.component';
    import { BlankComponent } from './layouts/blank/blank.component';

    import { NavigationComponent } from './shared/header-navigation/navigation.component';
    import { SidebarComponent } from './shared/sidebar/sidebar.component';
    import { BreadcrumbComponent } from './shared/breadcrumb/breadcrumb.component';
    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
    import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
    import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';

    import { Approutes } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { SpinnerComponent } from './shared/spinner.component';
    import { CreatePropertyComponent } from './create-property/create-property.component';

    const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
      suppressScrollX: true,
      wheelSpeed: 2,
      wheelPropagation: true,
    };

    @NgModule({
      declarations: [
        AppComponent,
        SpinnerComponent,
        FullComponent,
        BlankComponent,
        NavigationComponent,
        BreadcrumbComponent,
        SidebarComponent,
        CreatePropertyComponent,








      ],
      imports: [
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(Approutes, { useHash: false }),
        PerfectScrollbarModule
      ],
      providers: [
          {
          provide: PERFECT_SCROLLBAR_CONFIG,
          useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
        },{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      }],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

facilitistatus.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import {FacilitistatusComponent} from './facilitistatus.component';



const routes: Routes = [{
  path: '',
  data: {
    title: '',
    urls: [{title: 'Dashboard',url: '/dashboard1'},{title: 'Facility Status'}]
  },
  component: FacilitistatusComponent
}];

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [FacilitistatusComponent]
})
export class FacilitistatusModule{ }