Angular2动态显示ngModel中使用的字符串/键？

Question

我是 angular2 的新手。我一直在尝试寻找可能的方法来显示用于动态绑定[(ngModel)] 的字符串。我的目标是显示基于 Url 参数的 DOM 本身的 HTML 元素中使用的绑定键。由于我的应用程序很大，这将更有利于开发。

我需要使用“指令”显示放置在任何 div 包装器下的每个 ngModel 字符串/键。假设“showModelKey”将用于识别放置在 Div 包装器下的元素。

<div class='content-wrapper' showModelKey>
 <input [(ngModel)]="myFirstName" name="first_name">
  <!-- here myFirstName is ngModel string/key -->
....
 <textarea[(ngModel)]="commentModel" name="comment"></textarea>
 </div>

这里 showModelKey 应该找到在 div 包装器下使用的字段并添加另一个指令（如果需要）以显示用于 DOM 中 ngModel 绑定的键。

从上面的示例屏幕中，myFirstName 是 ngModel 键，已在 DOM 中显示。

请告知实现这一目标的可能方法。

更新：是否可以覆盖 ngModel 指令？如果是这样，我们可以在它被解析之前得到它吗？

Answer 1

您可以通过创建一个包装器对象来做到这一点，该对象将负责保存所有动态值的key 和value 对。该对象名称可能是组件内部的model。

//inside component
model: any = {};

HTML

<div class='content-wrapper' showModelKey>
  <input [(ngModel)]="model[dynamicKey1]" name="first_name">
  <!-- here myFirstName is ngModel string/key -->
  ....
  <textarea[(ngModel)]="model[dynamicKey2]" name="comment"></textarea>
</div>