NG0303：无法绑定到 'ngModel'，因为它不是 'ion-range' 的已知 属性

Question

我几天前开始使用 Ionic 和 angular 项目。 我在为我的项目服务时遇到了问题。 这是错误：NG0303：无法绑定到 'ngModel'，因为它不是 'ion-range'.

的已知 属性

我想使用带离子范围的亮度 puglin。 这是我的代码。

app.module.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 来管理它们。

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

brightness.component.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

确保在您的 app.module 中导入 RandomerModule app.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

randomer.module.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。

亮度。component.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() { }

}

brightness.component.html:

现在删除 (ionChange)="adjustBrightness()" 行