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

Posted 2023-03-13

【中文标题】NG0303：无法绑定到“ngModel”，因为它不是“离子范围”的已知属性

【英文标题】：NG0303: Can't bind to 'ngModel' since it isn't a known property of 'ion-range'

【发布时间】：2021-06-04 20:47:28

【问题描述】：

我几天前开始使用 Ionic 和 Angular 项目。 我在为我的项目服务时遇到了问题。 这是错误：NG0303: Can't bind to 'ngModel' because it is not an known property of '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>

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

【问题讨论】：

NgModel 用于表单，而不是您使用它。您已经在 ion-range 标签中将该值设置为该变量。只需删除 NgModel。

但是如果我离开 NgModel 我看不到亮度的变化

【参考方案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方法到你的brightness component.ts。

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 

  
  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()" 行

【讨论】：

感谢您的建议，但它不起作用。范围出现在 html 上，但是当我移动旋转以降低或增加亮度时，什么也没有发生......我在网上关注了一些视频，每个人都有相同的代码......

这可能是一个很长的镜头，但请尝试在您的 AppModule 中导入 Tab1PageModule

如何通过 ngModule 或其他方式将亮度的新值从html发送到brightness.component.ts？

使用[(NgModel)] 是正确的。这里的问题是 brightness.component.ts 无法检测 FormsModule。如果上述方法不起作用，请尝试在RandomerModule 中导入FormsModule（假设您在AppModule 中导入了RandomerModule）。

我刚刚再次更新了我的答案，如果有帮助请告诉我！