0

以前の値が現在の値と同じ場合に @Input 値の変更検出 (更新テンプレート) を実行する方法は?

デモ: https://plnkr.co/edit/Rvz2ElLjM20R3nC6ZQWt?p=preview

を使用してngrxいます。

ユースケース: 入力値が空の場合、ぼかしイベントの後に入力のデフォルト値を設定したい。

入力：

        <input 
            id="format" 
            class="form-control" 
            type="text" 
            [value]="inputValue" 
            (keyup)="keyup$.next($event.target.value)"
            (blur)="blur$.next($event.target.value)"
        >

[value]="inputValue"-@Inputから取得したダム コンポーネントの値store -> format。storeこの方法でから値を取得します。

//main component

//template
template: `<format-input [inputValue]="format$ | async" (outputValue)="updateFormat($event)"></format-input>`

this.format$ = this.store.let(getFormat());

//form-reduser.ts
export function getFormat () {
    return (state$: Observable<GeneratorFormState>) => state$
        .map(s => s.format);
}

両方keyupとblurアクションを実行しますupdateFormat。

私の問題は、挿入された値が前の値と同じであった場合、blurイベントの後[value]="inputValue"が更新されないことです。storestore

例えば：

1) 値を保存: 22 => 入力値: 22 => 入力値をクリア (カット) => ぼかしイベント => 入力が空、既定値 (1) を保存に設定 => 値を保存: 1 => 入力値: 1

2) 値を保存: 1 => 入力値: 1 => 入力値をクリア (カット) => ぼかしイベント => 入力が空で、既定値 (1) を保存に設定 => 値を保存: 1 => 入力値: '' （空の）

それで、どうすればこれを修正できますか？

4

1 に答える 1

0

I'm not sure I understand your problem but this might be what you're looking for

Import ChangeDetectorRef and call cdRef.detectChanges() after before the values is set to the old value.

于 2016-08-10T13:09:45.840 に答える