Question

当我尝试在作为组件的模态中使用ngModel时出现错误，我将FormsModule和ReactiveFormsModule导入到我的模态/组件module.ts中，但仍然无法正常工作，有人可以帮我吗？

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

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

FilterModule

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 {}

自定义组件获取错误，因为它不是“ ion-select”的已知属性，所以无法绑定到“ ngModel”

1 个答案: