Question

我制作了一个自定义的Angular 2管道，用于将10位数字的电话号码格式设置为“XXX-XXX-XXXX＆＃39;”。我制作的管道效果很好，但在您编辑然后保存之前它不会更新。它不会在按键上更新。

我已经在自定义管道上阅读了几个不同的地方，但我不知道从这里走哪条路线。 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" />

Answer 2

答案GünterZöchbauer解决了这个问题，但是现在你说它不能按预期工作，这可能会对你有所帮助，但如果这将是你想要的最佳方法那么

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

require 'json'

json = <<EOJSON
  {
      "userReviewList": [{
              "userReviewId": "789021517",
              "body": "My shopping experience has bla bla bla",
              "date": "Apr 16, 2013",
              "name": "Djdannybhhhhh",
              "rating": 5,
              "title": "Awesome!",
              "voteCount": 0,
              "voteSum": 0,
              "viewUsersUserReviewsUrl": "https://xxxxxx.com/us/rexxxws?usxxxxileId=xxxxxx",
              "voteUrl": "https://xxxxxx.com/us/rexxxws?usxxxxileId=xxxxxx",
              "reportConcernUrl": "https://xxxxxx.com/us/rexxxws?usxxxxileId=xxxxxx",
              "reportConcernExplanation": "xxxxxxxxxxxxxxxxxxxxxxxxxx.",
              "customerType": "Customers",
              "reportConcernReasons": [{
                      "reasonId": "0",
                      "name": "Choose One"
                  }, {
                      "reasonId": "1",
                      "name": "This review contains offensive material"
                  }, {
                      "reasonId": "8",
                      "name": "This review is not a review or is off-topic"
                  }, {
                      "reasonId": "9",
                      "name": "I disagree with this review."
                  }, {
                      "reasonId": "7",
                      "name": "My concern isn't listed here."
                  }
              ]
          }
      ]
  }
EOJSON

response = JSON.parse(json)
puts response['userReviewList'].first['userReviewId'] #=> 789021517

我希望它会有所帮助

Answer 3

你有两个问题，一个是错字级错误，另一个是实质性问题。错误的是你的管道，在4-6的情况下，应该在索引3开始第二个子串，而不是2。

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

Answer 4

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

再次感谢您的帮助，希望将来能帮助其他人。

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

4 个答案: