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

【问题标题】：Angular 2 Custom Pipe not Updating Until Object SavedAngular 2 自定义管道在保存对象之前不会更新
【发布时间】：2016-03-10 18:35:36
【问题描述】：

我制作了一个自定义 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;
    }
  }
}

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

谢谢！

【问题讨论】：

我不确定你真正想要发生什么。管道应该只改变电话号码在输入元素中的显示方式或它在obj.phone中的存储方式？
您正在使用单向绑定 [ngModel]="obj.phone"。因此，当您更改数据时，它不会设置回模型。在 [(ngModel)]="obj.phone" 等双向绑定期间不能使用管道

标签： angular typescript

【解决方案1】：

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

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

【讨论】：

这确实触发了一个事件，但它仍然无法按预期工作。我更新了plunk。再次检查一下，看看我的意思。
“预期是什么”的问题仍未得到解答（请参阅我对您问题的评论）。

【解决方案2】：

答案 Günter Zöchbauer ，解决问题，但现在你说它没有按预期工作，也许这对你有帮助，但如果这将是你想要的最佳方法，则不是

https://plnkr.co/edit/JAxA777p1dX8u2RpmvSA?p=preview

希望对你有帮助

【讨论】：

我很高兴为您提供帮助，但我认为@Günter Zöchbauer 的答案必须是公认的好运
问题是你试图用管道代替指令

【解决方案3】：

您有两个问题，一个是拼写错误，另一个是更严重的错误。错字是你的管道，在 4-6 的情况下，应该从索引 3 开始第二个子字符串，而不是 2。

更大的错误是您的ngModelChange 处理程序需要执行管道转换的反向操作。每次 ngModelChange 触发时，它都会将管道修改的值发送回您的模型数据，然后通过管道发送回用于显示，这样您就可以通过管道的重复应用过滤数据。但是——这很重要——你不能只是简单地应用管道的精确反转，删除第四个和第七个字符；您的 ngModelChange 处理程序接收的输入将是管道的输出，由一个输入更改修改，并且如果破折号甚至在那里，这通常会抛出插入的破折号的位置 - 如果输入更改是一个粘贴以前为空的字段中的完整 10 位数字？相反，请尝试搜索并删除破折号，无论它们可能在哪里。

【讨论】：

我最终做的是每次管道运行时，我在进入 switch 语句之前删除了所有的“-”。这样我每次都只从 switch 语句中的数字开始，并且知道我可以从同一个索引开始。

【解决方案4】：

感谢您的所有回答。我最终使用了一点@Günter Zöchbauer 的答案，带有 ngModelChange 事件，然后每次管道运行时都必须更改自定义管道以去除“-”。 I updated my plunk 显示更改。

再次感谢您的帮助，希望这对未来的其他人有所帮助。

【讨论】：