离子：在定制组件内进行离子选择(ionic: ion

离子：在定制组件内进行离子选择(ionic: ion-select within a custom component)

我已经创建了一个包含离子选择的自定义组件。 当我尝试通过将'ngModel'传递给不更新的组件来更改值时。

请帮我解决它

代码如下：

查找数据-directive.html

<ion-item> <ion-label floating>{{ title }}</ion-label> <ion-select [(ngModel)]="innerValue" [okText]="okText" [cancelText]="cancelText"> <ion-option *ngFor="let item of lookupData" [value]="item.ItemCode"> {{ item.Description }} </ion-option> </ion-select> </ion-item>

查找数据-directive.ts

import { Component, ElementRef, Input, forwardRef } from '@angular/core'; import { TranslateService } from '@ngx-translate/core' import { Loading, LoadingController, AlertController, NavParams } from "ionic-angular"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; import { LookupDataModel } from "../../models/LookupDataModel"; import { LookupDataProvider } from '../../providers/LookupDataProvider'; import { RequestTasksProvider } from "../../providers/RequestTasksProvider"; const noop = () => { }; export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LookupDataDirective), multi: true }; @Component({ selector: 'lookup-data', templateUrl: 'lookup-data-directive.html', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class LookupDataDirective implements ControlValueAccessor { private innerValue: any = ''; loader: Loading; lookupData: LookupDataModel[]; @Input() title: string; @Input() okText: string; @Input() cancelText: string; @Input() tableCode: number; private onTouchedCallback: () => void = noop; private onChangeCallback: (_: any) => void = noop; constructor( private translate: TranslateService, private loadingCtrl: LoadingController, private alertCtrl: AlertController, private lookupDataProvider: LookupDataProvider) { } writeValue(value: any) { if (value !== this.innerValue) { this.innerValue = value; } } registerOnChange(fn: any): void { console.log('registerOnChange'); this.onChangeCallback = fn; } registerOnTouched(fn: any): void { this.onTouchedCallback = fn; } get value(): any { return this.innerValue; }; set value(v: any) { if (v !== this.value) { this.innerValue = v; this.onChangeCallback(v); } } onBlur() { this.onTouchedCallback(); } ngOnInit() { this.loadLookupData(); } loadLookupData() { //here i load the data from api } }

在这里我尝试通过这个模型：

<lookup-data [title]="lookupDataTitle" [tableCode]="lookupIndex" [okText]="okText" [cancelText]="cancelText" [(ngModel)]="model.CancelationCode"> </lookup-data>

I have created a custom component with ion-select within it. When I try to change a value by passing 'ngModel' to the component it's not updating.

Help me to solve it, please

Here is the code:

lookup-data-directive.html

<ion-item> <ion-label floating>{{ title }}</ion-label> <ion-select [(ngModel)]="innerValue" [okText]="okText" [cancelText]="cancelText"> <ion-option *ngFor="let item of lookupData" [value]="item.ItemCode"> {{ item.Description }} </ion-option> </ion-select> </ion-item>

lookup-data-directive.ts

import { Component, ElementRef, Input, forwardRef } from '@angular/core'; import { TranslateService } from '@ngx-translate/core' import { Loading, LoadingController, AlertController, NavParams } from "ionic-angular"; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; import { LookupDataModel } from "../../models/LookupDataModel"; import { LookupDataProvider } from '../../providers/LookupDataProvider'; import { RequestTasksProvider } from "../../providers/RequestTasksProvider"; const noop = () => { }; export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LookupDataDirective), multi: true }; @Component({ selector: 'lookup-data', templateUrl: 'lookup-data-directive.html', providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class LookupDataDirective implements ControlValueAccessor { private innerValue: any = ''; loader: Loading; lookupData: LookupDataModel[]; @Input() title: string; @Input() okText: string; @Input() cancelText: string; @Input() tableCode: number; private onTouchedCallback: () => void = noop; private onChangeCallback: (_: any) => void = noop; constructor( private translate: TranslateService, private loadingCtrl: LoadingController, private alertCtrl: AlertController, private lookupDataProvider: LookupDataProvider) { } writeValue(value: any) { if (value !== this.innerValue) { this.innerValue = value; } } registerOnChange(fn: any): void { console.log('registerOnChange'); this.onChangeCallback = fn; } registerOnTouched(fn: any): void { this.onTouchedCallback = fn; } get value(): any { return this.innerValue; }; set value(v: any) { if (v !== this.value) { this.innerValue = v; this.onChangeCallback(v); } } onBlur() { this.onTouchedCallback(); } ngOnInit() { this.loadLookupData(); } loadLookupData() { //here i load the data from api } }

Here I try to pass the model:

<lookup-data [title]="lookupDataTitle" [tableCode]="lookupIndex" [okText]="okText" [cancelText]="cancelText" [(ngModel)]="model.CancelationCode"> </lookup-data>

最满意答案

<ion-select [(ngModel)]="innerValue" [okText]="okText" [cancelText]="cancelText">

在这里我应该通过'set value'方法，而不是一个innerValue参数。

所以我解决了它：

<ion-select [(ngModel)]="value" [okText]="okText" [cancelText]="cancelText"> <ion-select [(ngModel)]="innerValue" [okText]="okText" [cancelText]="cancelText">

Here I was supposed to pass 'set value' method, not a innerValue param.

So I fixed it by:

<ion-select [(ngModel)]="value" [okText]="okText" [cancelText]="cancelText">