NG0303:无法绑定到“ngModel”，因为它不是“离子范围”的已知属性

Question

几天前，我开始使用角项目的离子。我有一个问题，当我服务我的项目.这是错误： NG0303：不能绑定到'ngModel'，因为它不是一个已知的属性'离子范围'.

我想用离子范围的亮度普林。这是我的密码。

应用程序。单元ts

  import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Brightness } from '@ionic-native/brightness/ngx';



@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },Brightness],
  bootstrap: [AppComponent],
})
export class AppModule {}

我有一些随机组件的共享文件夹和一个随机器。模块来管理它们。

在randomer.module.ts

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberRandomComponent } from './number-random/number-random.component';
import { ActionsheetComponent } from './actionsheet/actionsheet.component';
import { BrightnessComponent } from './brightness/brightness.component';
import { IonicModule } from '@ionic/angular';



@NgModule({
  declarations: [NumberRandomComponent,ActionsheetComponent,BrightnessComponent],
  imports: [
    CommonModule,IonicModule
  ],
  exports:[NumberRandomComponent,ActionsheetComponent,BrightnessComponent]
})
export class RandomerModule { }

还有我的brigthness.component.html

  <p>
  brightness works!
 
  Current brightness level is {{ brightnessModel }} / 1
</p>
<ion-item>
  
    <ion-range min="0" max="1" step="0.01" [(NgModel)]="brightnessModel" (ionChange)="adjustBrightness()" [value]="brightnessModel">
      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
      <ion-icon slot="end" name="sunny"></ion-icon>
  </ion-range>
 
</ion-item>

亮度组成部分ts:

import { Component, OnInit } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';

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

  public brightnessModel = 0.20;

  constructor(private brightness: Brightness,) {
    // Set brightness on app load
   this.brightness.setBrightness(this.brightnessModel);
  }

  adjustBrightness(){
    // Called method from range's ionChange event
    this.brightness.setBrightness(this.brightnessModel);
  }
  ngOnInit() { }

}

在这里我导入我的randomer.module.tab1.module.ts：

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab1PageRoutingModule } from './tab1-routing.module';
import { RandomerModule } from '../commons/randomer.module';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    RandomerModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

在tabPage.html我有：

<app-brightness></app-brightness>

我不明白如何解决这个问题。

Answer 1

请确保导入R随机模块在您的app.moduleapp.module.ts：

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,IonicModule.forRoot(), AppRoutingModule, RandomerModule], // <============== RandomerModule here.
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },Brightness],
  bootstrap: [AppComponent],
})
export class AppModule {}

FormsModule在您的RandomerModule

随机化者。单元ts:

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberRandomComponent } from './number-random/number-random.component';
import { ActionsheetComponent } from './actionsheet/actionsheet.component';
import { BrightnessComponent } from './brightness/brightness.component';
import { IonicModule } from '@ionic/angular';



@NgModule({
  declarations: [NumberRandomComponent,ActionsheetComponent,BrightnessComponent],
  imports: [
    CommonModule,IonicModule,FormsModule // <=== FormsModule here
  ],
  exports:[NumberRandomComponent,ActionsheetComponent,BrightnessComponent]
})
export class RandomerModule { }

和这些setter/getter方法到您的亮度component.ts.

亮度组成部分ts:

import { Component, OnInit } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';

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

  
  private _brightnessModel = 0.20;  // <=== modified this
  public get brightnessModel() {    // <=== add this setter
      return this._brightnessModel;
  }

  public set brightnessModel(num: number) {  // <=== add this getter
      this._brightnessModel = num;
      this.brightness.setBrightness(num); 
  }

  constructor(private brightness: Brightness,) {
    // Set brightness on app load
   this.brightness.setBrightness(this.brightnessModel);
  }

  adjustBrightness(){
    // Called method from range's ionChange event
    // this.brightness.setBrightness(this.brightnessModel);
  }
  ngOnInit() { }

}

亮度组成部分html:

现在删除（ionChange）="调整亮度（）"行