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

Question

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

我需要使用“指令”显示放置在任何 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 绑定(bind)的键.

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

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

已更新:是否可以覆盖 ngModel 指令？如果是这样，我们能否在解析之前获取 key ？

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>