[英]Custom Component get error Can't bind to 'ngModel' since it isn't a known property of 'ion-select'
I'm having an error when I try to use ngModel inside a modal which is a component, I imported the FormsModule and ReactiveFormsModule into my modal / component module.ts and it still did not work, can anyone help me please? 当我尝试在作为组件的模态中使用ngModel时出现错误,我将FormsModule和ReactiveFormsModule导入到我的模态/组件module.ts中它仍然无效,任何人都可以帮助我吗?
On the page that calls the model I'm also importing FormsModule and still get this error: 在调用模型的页面上,我也导入FormsModule并仍然出现此错误:
Can't bind to 'ngModel' since it isn't a known property of 'ion-select'
FilterModule 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 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 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() {
}
}
I discovered the problem, I have a components.module.ts file that imports all the components of my app, so I just had to declare the FormsModule in that component. 我发现了问题,我有一个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 {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.