ionic：カスタムコンポーネント内でイオン選択

Question

イオン選択でカスタムコンポーネントを作成しました。 '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> 

Answer 1

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

ここで、私は '値の設定'メソッドを渡して、innerValueのパラメータではないと考えました。

だから私はでそれを修正：

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