Question

我需要做的是将一个离子输入绑定到模型，但显示格式化的值，同时保持模型中的原始值。

文本掩码在这里不适用于afaik，它也会转换原始值。

所以我去了一个解决方案，我在ion-input上放了一个指令，它隐藏了子输入并插入了一个包含格式化值的div。

一切正常，但如果在其他地方修改了模型，div不会自动更新。

问题：如何将div动态绑定到模型（调用formatNumber函数）？

我已经探索了一些可观察的＆＃34;方式，但没有成功......

这是一个（简化的）代码示例，用于管理输入和div ...

home.html的

<ion-content padding>
  <ion-item>
    <ion-label stacked>Label</ion-label>
    <ion-input item-content myDirective [(ngModel)]="data.field01"></ion-input>
  </ion-item>
</ion-content>

home.ts

import { Component, Input } from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    @Input() data;
  constructor() {
        this.data = {
            field01: 100000
        }
  }
}

myDirective.ts

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '[myDirective]'
    host: {
        '(click)': 'onClick()'
    }
})
export class MyDirective {
  public formattedValue: string;
  constructor( private elemRef: ElementRef,
                             private renderer: Renderer
                         ) {
  }
    ngOnInit() {
        setTimeout(() => {
            let myInput = this.elemRef.nativeElement.children[0];
            this.myInput.hidden = 'true';
            let myDiv = document.createElement("div");
            this.myDiv.className = this.myInput.className;
            this.myDiv.innerText = 'mydiv';
            this.elemRef.nativeElement.appendChild(this.myDiv)
        }, 0);
    }
    onClick() {
            this.showPicker();
    }
    ...
}

其他信息：

输入值是通过我没有放在这里的自定义选择器进行编辑的 =＆GT;工作正常
当选择器关闭时，格式化的值直接通过picker =＆gt;应用于myDiv;工作正常

Ionic 2如何将动态添加的div文本绑定到模型？

0 个答案: