问题标签 [angular-ngmodelchange]

我有一个显示项目列表的表格。该表使用 ngModel 进行数据绑定，因此我可以在同一页面上编辑表单中的项目。

表单有一个动态填充的 mat-select 组件。

桌子：

表格：

我想使用所选项目的 ID 在 (change) 事件上运行一个方法。我了解 ngModel，当我将其更新为 [(ngModel)]="newTrade.Status.ID" 和 [value]="status.ID" 我知道我可以使用 (ngModelChange)= 从事件处理程序中获取 ID “setStatusID（状态。值）”。但是，当我进行这些更改时，单击表中的编辑图标会导致在表单初始化时未选择项目。（单击编辑图标会运行一个方法来显示表单从表中传递项目。）

在另一种情况下使用 mat-autocomplete 我可以将 (onSelectionChange)="setStatusID(status.ID)" 添加到 mat-option 元素，但这似乎不适用于 mat-select，因为该函数会针对中的所有项目触发每次 mat-select 启动或更改时的列表。

我一直在努力解决这个问题。希望有人有解决方案，可以帮助我。

谢谢！

[编辑：这段代码实际上是有效的，所以它可以作为一个简单的例子来说明如何为初学者实现 ControlValueAccessor]

我制作了一个最简单形式的自定义组件，一个简单的差异，当点击它时会改变它的内部状态

问题：更新了 ngmodel (someValue) 但函数 doLiveChange() 永远不会被触发

我也不确定我的组件中需要或不需要什么......每个人都在按照自己的方式做，过于复杂的例子虽然它应该只是一个简单的界面

模板：

告诉我您是否需要更多信息

谢谢

我已经完成了一个简单的 CRUD 应用程序，现在我必须添加一个搜索栏来过滤我的表格并向我显示与我数字相同的字母的行。

我不知道在我的组件中该做什么，我看到管道和过滤器的不同之处，但我无法将它们适应我的项目。

我想知道是否有一种方法可以在我的 component.ts 中实现而无需创建新方法。

组件.HTML

COMPONENT.TS，在这里我必须创建适用于我的应用程序的正确方法。

数据结构：in.memory-data.service.ts

用户.ts

I am trying to fire an event when input value changes. I am using ngModel with ngModelChanges. But its not working

Example : Code here

Is it it possible to do this with ngModelChanges. If not then is there any other way?

问题的基本前提如下：

我有一个带有各种（自定义）输入的组件，当这些输入值中的任何一个发生变化时，我对 API 端点进行 HTTP 调用以重新计算我的受众范围，即它是一个 Campaign 系统，并且当用户定义受众人口统计时受众“覆盖面”的变化。

我使用 ngModelChanges 触发呼叫，效果很好。

但是，我的问题是，当组件加载现有数据（来自以前的保存）时，它会填充导致 ngModelChange 触发的输入，从而导致我的 HTTP 调用在页面加载时多次触发。

示例 HTML：

注意：我的自定义输入确实实现了ControlValueAccessor

.ts 文件：

可以看出，我确实尝试使用在 ngOnInit() 结束时设置为 false 的加载指示器，但由 ngModelChange 触发的调用都发生在（或之前？）OnInit 之后。

我有一个我的组件实现的抽象组件，其中加载指示器定义为：

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

即它的初始值设置为 true（在抽象组件中），并且仅在 ngOnInit 结束时更改为 false（在实际组件中）。

我有一个这样的html：

在控制器上我有 onChange 函数：

当我调试 onChange 函数的这个调用时，我注意到它仍在调用并且真的不知道为什么。我有一个无限循环。

我的角度包：

您知道我的代码可能有什么问题吗？

我有一个 Angular 8 应用程序。我想做的是不让用户在数字输入中设置任何其他值，而不是从 0-100 的范围

我在想这样的事情

和

当有 100 并且我删除最后一个数字并写 5（所以现在我应该有 105）时，它会变魔术并将值更改为 100。

当我用光标选择整数并写例如 105 时，它也会发挥作用。

然而。当我使用步进箭头或光标选择最后一位数字并更改最后一位数字时，魔法并没有发生。

为什么这不起作用？

在我的应用程序中，我想用一个 ngModelChange 更改 3 个值。

我的组件看起来像：

我的 html 看起来像：

想要更新 cpu（以及 ram 和 diskSize）：

来自后端 api 的图像的 Json 结果：

也尝试过（更改）但不工作。PS 我有一个类似的逻辑，它根据 id 更新另一个下拉列表，它工作正常。但是对于多个参数，它不起作用。

上图代表我正在进行的一个项目。在 3 个字段中，仅手动输入采购价格数据。我使用以下标记和 TS 代码将未偿抵押贷款字段设置为先前提供的数字的百分比：

...

我的挑战是我需要为抵押贷款支付领域做类似的事情，但作为未偿抵押贷款价值的百分比。因为该值不是手动提供的，所以 ngModelChange 策略不起作用。

我该如何解决最后一步？

更新

在我的 setPercentages() 函数中，我尝试为抵押付款设置一个变量，但出现以下错误：

指定的值“NaN”无法解析，或超出范围。

我怀疑这是因为该字段被认为是空的，即使在视觉上它有数据。我使用了以下代码：

我正试图围绕 ngModel ngModelChange。多选返回一个我想要连接成单个字符串的选择数组。我似乎无法从多选中获取值。mobileChange() 函数返回内部未定义的数组，该数组等于选择的数量。即 ['undefined', 'undefined'] 如果选择了两个选项。

我如何获得价值？

模板 HTML

组件 TS