angular2 在input上使用管道(过滤器）

1.例牌，上需求

需求：用angular2进行开发Web App,登录时，用户填写的小写字母直接转换成大写字母显示：  abc=>ABC;

各位客官看到可能想打我，ng2不是有个uppercase管道吗？直接用就好了，还跑来这里讲故事，客官别急啊：

{‘abc’ | uppercase} 这个样子是会显示出大写的，但是，我说的是input，难道要这样写：

<input [(ngModel)]='userName | uppercase' > 显然如果这样不报错我就不来YY了

这时又有人说，给变量添加个监听就好了，监听到变量有变化就直接使用uppercase,这个方法是可以的，但是：

别人都有做好的管道给你了，腻害监听，脱裤子放屁不嫌麻烦啊，要是这样子写代码不动脑，一个小项目你可以写几千上万行，到时维护修改搞死自己

既然别人都有做好了，而且你又上了ng2的道了，肯定用别人的了

不扯淡，主题：

ngModel双向绑定有两种形式：

1.[(ngModel)]  这是最常见的方式

2. [ngModel]="userName" 输入属性绑定 (ngModelChange)="userName=$event" 输出属性绑定

第一个是输入属性，数据从模型流向视图，  第二个是输出属性：数据从视图流向模型，$event这个时候表示输入框的值（注意，$event在这里比较特殊，一般方法中的$event代表的是节点对象）

正常情况都是使用第一种绑定方式，但是如果对输入和输出数据有不一样的处理，那就使用第二种绑定方法，看到这里你也知道该怎么整了吧，如果还不知道我也没办法了。

还不知道看这里：

<input [ngModel]="userName| uppercase" (ngModelChange)="userName=$event" type="text">

ps：注意，输入字符的最后一个还是没有转换的，因为最后一个字符流向了数据模型，但是没有留向模型，具体为什么自己去想，想不明白我也没办法了