输入标签无法在 Angular 5 中正常工作答案

【问题标题】：input tag not working properly with Angular 5输入标签无法在 Angular 5 中正常工作
【发布时间】：2020-08-20 17:26:09
【问题描述】：

我试图在 Angular 5 中实现一个功能，但遇到了输入标签无法正常工作的问题。

这是代码的链接：stackblitz

如果有人能告诉我我在这里做错了什么，或者只是一些角度版本问题，那就太棒了。因为相同的代码在 angular 10 上运行良好。

【问题讨论】：

你想做什么？
对不起，Diksha 我的回答可以帮助您解决 6+ 的问题。我已将其删除。我会努力寻找解决办法。
@StPaulis 我有一个对象，必须以这种格式显示数据。这里我使用了一些虚拟数据，同样，我必须显示输入标签并接受用户输入，但如果你看到输入标签，你将无法在那里提供输入。
@AshotAleqsanyan 好的。没问题。
@DikshaGoyal 这是我的答案，也许这可以帮助您在找到解决方案之前找到另一种解决方法：问题是您的键值管道每次都返回数组的新引用，所以每次都会有角度重新渲染所有 ngFor 项目。您可以通过在 ngFor 上添加 trackBy 来解决此问题。它将在重新渲染项目之前进行检查。并且只会渲染需要重新渲染的项目。

【解决方案1】：

问题是您的 keyvalue 管道每次都会返回数组的新引用，因此每次 angular 都会重新渲染所有 ngFor 项目。您可以通过在 ngFor 上添加 trackBy 来解决此问题。它将在重新渲染项目之前进行检查。并且只会渲染需要重新渲染的项目。

下面是工作示例：

注意：对于小于 6 的角度和角度 6+ 的解决方案有一个解决方法示例

【讨论】：