Angular2 для динамического отображения строки / ключа, используемого в ngModel?

Я новичок в angular2. Я пытался найти возможные способы динамического отображения строки, которая используется для привязки в [(ngModel)]. Моя цель показать ключ привязки, который используется в элементах HTML в самой DOM на основе параметра URL. Поскольку мое приложение огромно, оно будет более продуктивным для разработки.

Мне нужно показать каждую строку / ключ ngModel, который помещается под любую оболочку div с помощью «Директивы». Скажем, 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, и добавить другую директиву (при необходимости) для отображения ключа, который используется для привязки ngModel в DOM .

введите описание изображения здесь

На приведенном выше примере экрана myFirstName - это ключ ngModel, показанный в DOM.

Посоветуйте, пожалуйста, возможный способ этого добиться.

Обновлено: можно ли переопределить директиву ngModel? Если да, можем ли мы получить ключ до того, как он будет проанализирован?


angular angular2-directives
person mymotherland    schedule 06.03.2018    source источник
comment
Если вы ищете способ отладки / проверки привязок в своем приложении, Augury - это полезное расширение Chrome.   -  person JayChase    schedule 12.05.2018
comment
Возможно, если вы используете NG_VALUE_ACCESSOR, вы можете перехватить перед переопределением, см. stackoverflow.com/a/46465959/3415716   -  person Leo Caseiro    schedule 16.05.2018

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете сделать это, создав объект-оболочку, который будет отвечать за хранение пары 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>
person Pankaj Parkar    schedule 06.03.2018
comment
поскольку я не мог обновить существующий ключ ngModel во всем приложении, я попробовал другой подход, основанный на директиве. Эта директива должна отображать ключ ngModel в DOM. Еще раз спасибо - person mymotherland; 06.03.2018
comment
@mymotherland не понимает вашего последнего утверждения, не могли бы вы подробнее рассказать об этом? - person Pankaj Parkar; 06.03.2018
comment
Пожалуйста, посмотрите на пример экрана. Мне нужно показать ключ ngModel в DOM рядом с полем, используемым в шаблонах компонентов. - person mymotherland; 06.03.2018
comment
Можно ли отменить директиву ngModel? Если да, можем ли мы получить ключ до того, как он будет проанализирован? - person mymotherland; 06.03.2018
comment
Вау! Спасатель. Спасибо. - person Anjana Silva; 11.07.2020