我试图找到一种方法，在初始页面加载时以百分比（例如 97,52%）显示 html 输入字段（通过角度服务获取到后端的数据，即可观察/订阅），但也有这个输入字段松散它是我编辑时的百分比格式（即，当引发 DOM（焦点）事件时）。
format 的数据绑定到一个模型。让我们将模型字段称为 myModel.percentNumber，其中对于 '100 %' 为 percentNumber=1（对于 '69 %' 为 .69，或者对于 '10 000 %' 为 100）
因此，当我单击指示“97,52 %”的字段时，我希望它变为“97.52”，但模型中的数据绑定值应为 0.9752，因为这是我需要存储的。
该字段应该使用 ngModel 进行绑定。
注意：这应该适用于国际化，所以我不能使用基于删除空格、替换 '.' 的“肮脏”解决方案。by ',' ... 在这里你可以看到我举了一个例子，其中格式化的百分比值应该有一个逗号作为小数分隔符，一个空格作为千位分隔符，但这取决于用户的本地化。
到目前为止，我已经尝试了一些东西，但没有一个解决了所有问题。
1）使用2路绑定作为起点，即
<input [(ngmodel)]="myModel.percentNumber | percent:'1.2-2'">
...但它确实会导致管道出现问题：
未捕获的错误：模板解析错误：
2）从2路绑定短语法我想要长语法，即
<input [ngmodel]="myModel.percentNumber | percent:'1.2-2'" (ngModelChange)="myModel.percentNumber = $event">
这允许在初始加载时具有正确的百分比格式（在后端响应时，如果 myModel.percentNumber=0.9752 它正确显示为“97,52 %”），但是，当您单击输入进行编辑时它，当我希望它显示“97.52”时，格式会保持不变()，例如 PercentPipe.parse() 之类的东西（不存在）。这将需要为您应该具有此行为的每个字段添加一个（焦点）事件处理程序。可重用性会很低。我相信 angular Directive 方法应该更可取。
3) 带有角度指令：我创建了一个PercentFormatterDirective带有选择器percentFormatter 和percentDigits字符串类型输入的指令，该输入将接受与 PercentPipe 相同的格式（即 digitInfo）。一个使用示例是：
<input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber" (ngModelChange)="myModel.percentNumber = $event"> …