Question

我已经在其中创建了一个带有ion-select的自定义组件。当我尝试通过将'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">

这里我应该传递'set value'方法，而不是innerValue param。

所以我修理了它：

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

离子：在自定义组件中进行离子选择

1 个答案: