自定义组件获取错误无法绑定到'ngModel'，因为它不是"离子选择"的已知属性

Question

当我尝试在模态内使用ngmodel时，我有一个错误工作，有人可以帮我吗？

在调用我也导入formsModule的模型的页面上，仍然会收到此错误：

 Can't bind to 'ngModel' since it isn't a known property of 'ion-select'

filtermule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FilterComponent } from './filter.component';
import { IonicModule } from '@ionic/angular';
@NgModule({
  declarations: [
    FilterComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
  ]
})
export class FilterModule { }

html

 <ion-content padding>
  <ion-item>
    <ion-label>Ordenar por</ion-label>
    <ion-select placeholder="Escolha a opção" interface="popover" [(ngModel)]="currentFilter.orderBy">
      <ion-select-option *ngFor="let field of sortFields" [value]="field.name">{{ field.text }}</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>Ordem</ion-label>
    <ion-select placeholder="Ascendente" interface="popover" [(ngModel)]="currentFilter.ascending">
      <ion-select-option [value]="1">Ascendente</ion-select-option>
      <ion-select-option [value]="0">Descendente</ion-select-option>
    </ion-select>
  </ion-item>
</ion-content>

filter.component.js

  export class FilterComponent implements OnInit {
  @Input() sortFields: any;
  @Input() currentFilter: any =  {
    orderBy: null,
    per_page: 20,
    total: "",
    page: 1,
    limit: 20,
    ascending: 0,
    search: null,
    startDate: null,
    endDate: null,
  };
  @Input() filterByRange: boolean = false;
  constructor(
    private modalCtrl: ModalController) { }
  ngOnInit() {
  }
}

Answer 1

我发现了这个问题，我有一个components.module.ts文件，该文件导入了我的应用程序的所有组件，因此我只需要在该组件中声明formsModule。

。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ValidationSummaryComponent } from './validation-summary/validation-summary.component';
import { TradingViewComponent } from './modals/trading-view/trading-view.component';
import { FilterComponent } from './modals/filter/filter.component';
import { IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule
    ],
    declarations: [
        ValidationSummaryComponent,
        TradingViewComponent,
        FilterComponent
    ],
    exports: [
        ValidationSummaryComponent,
        TradingViewComponent,
        FilterComponent
    ],
    entryComponents: [
        TradingViewComponent,
        FilterComponent
    ]
})
export class ComponentsModule {}