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

Question

我是angular2的新手。我一直试图找到可能的方法来动态显示用于绑定[(ngModel)]的字符串。我的目标是基于Url param显示在DOM本身的HTML元素中使用的绑定键。由于我的应用程序非常庞大，因此开发效率会更高。

我需要显示使用＆＃39;指令＆＃39;放置在任何div包装器下的每个ngModel字符串/键。让我们说“showModelKey＆＃39;将用于识别放置在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 是在DOM中显示的ngModel键。

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

已更新：是否可以覆盖ngModel指令？如果是这样，我们可以在解析之前获取密钥吗？

Answer 1

你可以通过创建一个包装器对象来做到这一点，该对象负责保持key＆amp; 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>