ionische Etiketten dynamisch erstellen

Question

Ich versuche, Ion-Labels dynamisch in IONIC2 zu erstellen.

Ich kann dies durch den folgenden Code verwendet HTML DOM

in JavaScript/Typoskript erreichen

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); 

Der obige Code erzeugt Basic HTML INPUT ... Blick und das Gefühl ist nicht bis zu ionischen Ion-Label. ..

Um Ionen-Label-und Ionen-Eingabe auf der HTML-Seite zu erstellen .. werden wir folgen.

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

Wie erstellt man das dynamisch in JavaScript/Typescript. ??

Answer 1

Ich fürchte, dass, um dies zu tun, müssen Sie die HTML-Markup erstellen, die Ionic generiert, wenn Sie diesen HTML-Code zu Ihrer Seite hinzufügen. Also, wenn Sie

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

in Ihrer Seite hinzufügen, nachdem wiedergegeben wird, wird dieser Code dann in umgewandelt:

<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> 

so dass Markup Erstellen document.createElement('ion-item'); und anschließend Klassen-Einstellung (mit element.className = ...;) und Anfügen Childs (mit element.appendChild(anotherElement);, obwohl es möglich ist, wird ein Alptraum sein.

Darf ich fragen, warum müssen Sie diese Etiketten dinamically erstellen? Vielleicht können wir einen Weg finden, um es mit Angular 2 Methoden zu tun und wir können vermeiden, Dinge auf diese Weise zu tun.