динамически создавать ионные метки

Question

Я пытаюсь создать динамические метки ионов в IONIC2.

я могу добиться этого в JavaScript/Машинопись с помощью следующего кода с помощью HTML DOM

var iDiv = document.createElement('input'); 
    iDiv.id="lbl2"; 
iDiv.setAttribute("type","text"); 
iDiv.setAttribute("style", "background-color: transparent;"); 
iDiv.setAttribute('width','400px') 
iDiv.setAttribute('height','1000px') 
iDiv.setAttribute("value",""); 
iDiv.setAttribute("placeholder","Label2 placeholder"); 
document.getElementById('billerdiv').appendChild(iDiv); 

Приведенный выше код создает Basic HTML ВХОДА ... выглядеть и чувствовать себя не Upto ионную Ионно-метка. ..

Чтобы создать ионную метку и ионный вход со стороны HTML, мы будем следовать.

<ion-item> 
    <ion-label>Username</ion-label> 
    <ion-input type="text"></ion-input> 
    </ion-item> 

Как его создать динамически в JavaScript/Typcript. ??

Answer 1

Я боюсь, что для этого вам нужно будет создать html-разметку, генерируемую Ionic, когда вы добавите этот HTML-код на свою страницу. Поэтому, когда вы добавляете

<ion-item> 
    <ion-label>Username</ion-label> 
    <ion-input type="text"></ion-input> 
</ion-item> 

на странице, после того, оказывается, что код затем преобразуется в:

<ion-item class="item item-input"> 
    <div class="item-inner"> 
     <div class="input-wrapper"> 
      <ion-label id="lbl-0">Username</ion-label> 
      <!--template bindings={}--> 
      <ion-input type="text"> 
       <input class="text-input ng-untouched ng-pristine ng-valid" type="text" placeholder="" aria-labelledby="lbl-0" autocomplete="off" autocorrect="off"> 
       <!--template bindings={}--> 
       <button class="text-input-clear-icon button button-clear" clear="" type="button" hidden=""><span class="button-inner"></span> 
        <ion-button-effect></ion-button-effect> 
       </button> 
       <!--template bindings={}--> 
      </ion-input> 
     </div> 
    </div> 
    <ion-button-effect></ion-button-effect> 
</ion-item> 

Так создавая эту разметку с помощью document.createElement('ion-item'); и затем установить классы (с element.className = ...;) и добавления Чайлдс (с element.appendChild(anotherElement);, хотя это возможно, станет кошмаром.

Могу ли я спросить, почему вам нужно создавать эти ярлыки динамически? Может быть, мы сможем найти способ сделать это, используя методы Angular 2 и мы можем избежать этого.