问题标签 [ngmodel]

我将输入定义为：

正如您在 Plunker 中看到的那样，在字段中输入时，最后输入的字符不会被大写。我应该以不同的方式处理这个问题吗？

Plunker：https ://plnkr.co/edit/264FHAlgX9xcpeDc9Glr?p=preview

我正在研究 Ionic2 + Angular2，我想使用段，所以我使用ngSwitchWhen了，但它不起作用。发生错误。

我该如何使用它？为什么它不起作用？

这是错误消息。

如标题所述。我的 html 中有一个嵌套ngFor循环。我在语句中使用这些ngFor循环之一。ion-select这是我的代码：

我试图弄清楚如何从*ngFor="let item of item.options"使用中获得价值[(ngModel)]。

谁能帮我解决这个难题？我被要求提供我的数据。我有一个要将此对象推入的数组：let item = { attender: member, options: [{}] };选项部分将一个 JSON 对象推入其中。这甚至可能是不可能的。

这是数据的总构建：

我正在与无线电组合作，对于不同行中的不同离子无线电选择，我使用了 ngModel，这已经完成。但是当用户更改它的值时，如果条件不匹配，我有一些条件，那么应该在使用 ngModel 时进行选择，但我无法这样做。我正在寻找重新加载数据或刷新数据，但我发现结果是刷新页面，我不想刷新页面。所以我想在使用 ngModel 时设置离子无线电的选择，有人可以帮我吗？我的代码在下面......

考虑以下标记：

现在，为了让这个输入字段处于 Angular 的控制之下（也就是说，让 Angular 创建一个控制对象并将其与所述输入字段相关联），我们添加以下指令：

当然，这使我们能够引用可用于显示验证的字段/控件对象div。

我只是想知道 Angular 开发人员是否有理由不让我们使用name属性的值——当然，在现场使用 ngModel 时，这是必需的——来引用控件。为什么需要将 ngModel 看似冗余/冗长的分配给模板变量#name="ngModel"？

我正在尝试找到一种方法，在初始页面加载（通过角度服务将数据获取到后端，即可观察/订阅）时以百分比（例如 97,52%）显示 html 输入字段，但也有此输入当我编辑它时（即引发 DOM（焦点）事件时），字段会丢失它的百分比格式。

格式的数据绑定到模型。我们将模型字段称为 myModel.percentNumber，其中 percentNumber=1 表示“100 %”（0.69 表示“69 %”或再次为 100 表示“10 000 %”）

因此，当我单击指示“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() 之类的东西（不存在）。这将需要为您应该具有此行为的每个字段添加（焦点）事件处理程序。可重用性会很低。我相信角度指令方法应该是可取的。

3) 使用角度指令：我创建了一个PercentFormatterDirective带有选择器的指令percentFormatter 和一个字符串类型的输入percentDigits，该输入将接受与 PercentPipe 相同的格式（即 digitInfo）。一个使用示例是：

<input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber" (ngModelChange)="myModel.percentNumber = $event">

我宁愿不必在 [ngModel] 中仍然使用“正常” PercentPipe，因为它需要编写 digitInfo1.2-2两次（即我不想写 <input percentFormatter percentDigits="1.2-2" [ngModel]="myModel.percentNumber | percent:'1.2-2'" (ngModelChange)="myModel.percentNumber = $event">

我可以在单击输入（焦点）时格式化值，正如我在 PercentFormatterDirective 中作为（焦点）事件的侦听器实现的那样：

因此，当我在该字段中单击时，这会从 '97,52 %' 到 '97.52' 得到满足。在这里，我不会详细介绍我创建的 parse() 方法（您只需要知道它是有效的，并且基于我用来获取用户本地化的 PercentPipe 和此查找是小数分隔符和千位分隔符）。

我还可以在离开输入字段时将值格式化为百分比格式，正如我在 PercentFormatterDirective 中作为 (blur) 事件的侦听器所实现的那样：

所以当我离开现场时，这会从 '97.52' 到 '97,52 %' 得到满足。在这里，我不会详细介绍 formatNumberInPercent() 方法（您只需要知道它有效并且基于 PercentPipe.transform() 方法，但是在 PercentPipe.transform() 之前将值除以 100 会得到你从 '0.9752' 到 '97,52 %' 但在我的输入中我有 '97.52' 这显然是用户要输入的）

这个问题是在初始加载时（更确切地说，当通过 observable/subscribe 从后端返回时，当 myModel.percentNumber 设置时），来自 PercentFormatterDirective 的（焦点）或（模糊）@HostListener 都不会被称为没有与 DOM 的用户交互。如果我在 PercentFormatterDirective 中添加一个 ngOnInit()，那么是的，我可以格式化绑定值（即使用我创建的自定义方法将“0.9752”转换为“97,52 %”，该方法formatNumberInPercent('100for100percent')再次使用 PercentPipe.transform() 方法，但是不将值除以 100）...但是，如果我直接在组件中绑定数据，则此方法有效，ei 不使用可观察/订阅。当使用 observable/subscribe（我必须使用）从后端获取答案时，ngOnInit()PercentFormatterDirective 的已执行。

当获得响应（来自可观察/订阅）时，我需要能够执行格式化。我尝试添加ngOnChanges(changes: SimpleChanges)PercentFormatterDirective（然后用 读取 SimpleChange 的 de 数组for (let propName in changes)），但是我没有看到来自 myModel.percentNumber 的新绑定值。似乎ngOnChanges(changes: SimpleChanges)只提供了一个 SimpleChange 数组，其属性对应于我的指令输入（即 percentDigits）。

我已经private elementRef: ElementRef注入了指令的构造函数，但正如我所说的，ngOnChanges()我无法获得 myModel.percentNumber 的值（this.elementRef.nativeElement.value给我“”，从来没有任何值）。

也许我在生命周期中还为时过早？

或者也许应该采取另一种方法？

如果您有任何建议，我会很高兴听到它提出来！:)

当使用从数组中ngModel获取属性来发出值来碰撞对象时，我遇到了一些问题。bumpDetail.name

我在下面粘贴了我的代码片段。
谁能帮我检查一下并告诉我哪里做错了？谢谢你。

这是错误。

解析器错误：在 ng:///AppModule/SettingComponent.html@129:59 ("p *ngFor="让bumpDetail的bumpDetail">

使用 Angular 4，我尝试为“日期”类型的输入设置一个值，但我做不到。我的领域的结构如下：

我尝试设置值的打字稿代码如下：

然而，什么也没有发生。当我使用 jQuery（是的，同时使用 Angular 和 jQuery）分配值时，它确实有效，但是，当我尝试使用 Angular 验证该字段时，该字段的状态为“无效”，因为 Angular 没有任何价值。我应该怎么办？

我的 html 看起来像这样

我试图将输入绑定到用户类属性，但在加载时出现错误

我如何围绕这个控制台错误编码？

TypeError：无法读取未定义的属性“用户名”我应该使用 ngModel 还是不需要它？

我在 Angular 5 应用程序中使用来自Angular Material的MatCheckboxModule 。

我有一个包含多行的表格和一个用于选择/取消选择表格中所有行的复选框：

组件部分由一个selectAll布尔属性、一个selectedData数组属性和一个toggleAll函数组成。如果selectAll为真，则此函数用所有行填充selectedData数组，否则将selectedData设置为空。

下面，一个组件代码摘录：

此功能有效。但是，我不知道如何测试将填充 selectedData 数组然后将其清空的单击。事实上，在我的以下代码中，数据总是推送到我的数组中，因为selectAll属性在第二次单击时没有更改：

你知道如何解决这个问题吗？

谢谢！