Angular 2自定义管道在对象保存之前不更新

Question

我制作了一个自定义的 Angular 2 管道，将 10 位数字的字符串中的电话号码格式化为“XXX-XXX-XXXX”。我制作的管道效果很好，但在您编辑并保存之前它不会更新。它不会在按键时更新。

我已经阅读了一些关于自定义管道的不同地方，但我不确定从这里应该走哪条路线。 Here's a plunk with the working custom pipe这也是代码:

组件:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      Phone: <input type="text" [ngModel]="obj.phone | phone" />
    </div>
  `,
  directives: [],
  pipes: [PhoneNumber]
})
export class App {
  public obj: any = {
    phone: '8885552233'
  };
  constructor() {
    this.name = 'Angular2'
  }
}

管道:

import {PipeTransform, Pipe} from 'angular2/core';

@Pipe({
  name: 'phone'
})
export class PhoneNumber implements PipeTransform{
  transform(value, args) {
    if( value ) {
      var str = "";
        switch( value.length ) {
            case 0:
            case 1:
            case 2:
            case 3:
                str = value;
                break;
            case 4:
            case 5:
            case 6:
                str = value.substring(0, 3) + '-' + value.substring(2, value.length);
                break;
            case 7:
            case 8:
            case 9:
            case 10:
                str = value.substring(0, 3) + '-' + value.substring(3, 6) + '-' + value.substring(6);
                break;
        }
        return str;
    } else {
      return value;
    }
  }
}

如果您有任何想法或建议，我将不胜感激!

谢谢!

Answer 1

您需要为 ngModelChange 事件添加一些操作

<input type="text" [ngModel]="obj.phone | phone" (ngModelChange)="obj.phone=$event" />