How to work with .append() like in jquerry

Ionic Framework
1

Hello guys, im just learning how to code an app in school, we are using ionic v4 and right now im suffering.
I want to copy the whole ion-item into the ion-list tag after the button has been pressed but when i do it with the .append() funktion the whole script just get written in html like in a p tag. i copy the script below.

ts script:
addPlayer(){
let list = document.getElementById(“list”);

console.log(list);

//list.append(document.getElementsByClassName("item")[0])

list.append(document.getElementsByClassName("item")[0])

}

html:
there is just a list with the id=list and an ion-item with class=item

2

Hey,

welcome to the Community. :blush:

What you are trying to do is definitive the wrong way to get around in Angular.

What is the context of what you want to do? Add Elements to an List on Button Click and update the View?

3

Hi please post more code and format it right please. So we can understand what you want to do here.

Best way would be if you provide us your html snippet and js snippet.

4

Sorry bois im a bit struggeling with the way i can copy the script.
So basically i just want to add players and if the button gets pressed it disappears and a new ion input with the same button shows up again. But if i do it with.append after the button has been pressed the button disappears and the script as it is in the html files gets written like in a p tag below.

image
image943×185 3.7 KB

5

Okay, sehe grade du bist deutsch :joy:

Also du solltest dich ein bisschen mit Angular vertraut machen. Deine Frage ist Angular, nicht Ionic spezifisch. Kannst du mir nochmal auf deutsch erklären was du meinst, habs noch nicht 100% verstanden.

6

Die Deutschen immer :smiley:
Ich glaube ich verstehe was du meinst.

Du willst wenn du einen Spielernamen eintippst und dann auf einen Button klickt dass der zu einer Liste hinzugefügt wird?

Aber anstatt dass der zur Liste hinzugefügt wird wird das Imput Element hinzugefügt?

7

So hab ichs auch verstanden :thinking:

8

Hallo Jungs ^^
Ja ich will dass wenn man einen Spieler eingibt und dann auf den Button drückt, dass dieser in einen Array gespeichert wird (aber das ist gerade nicht das Problem). Sondern auch dass nachdem dieser Name quasi “bestätigt” wurde das gesamte Ion-Item also mit Input und Button nach unten Kopiert wird dass ein weiterer Spieler hinzugefügt werden kann.

Ich musste 15 Minuten warten bevor ich wieder antworten durfte :frowning: sorry dafür hab mich gerade erst angemeldet.

9

Also in Angular ist das ganz geil: Wenn du eine Liste in deinem Controller aktualisierst, aktualisiert sich auch die View. Also sagen wir die hast am Anfang eine leere Liste mit Spielernamen und eine variable für den aktuellen Inputwert:

names: string[] = []:
nameInput: string = '';

Dann kannst du alle Namen in der Liste so anzeigen:

<ion-list>
  <ion-item *ngFor="let name of names">
    {{name))
  </ion-item>
  <ion-item>
    <ion-input [(NgModel)]="nameInput">
    <ion-button (click)="addToList()"></ion-button>
  </ion-item>
</ion-list>

Das ist eine Schleife über das Array names und es wird automatisch für jeden Eintrag ein ion-item Element erstellt. Das aktuallisiert sich sobald sich der Wert des Arrays ändert. Darunter ist ein Eingabe Feld und ein Button der eine Funktion aufruft. Dies könnte so aussehen:

addToList() {
  this.names.push(this.nameInput);
  this.nameInput = "";
}

Das fügt den aktuellen Wert in das Array ein (wodurch das HTML aktualisiert wird) und der Wert im Input wird zurückgesetzt.

Verzeih wenn ich Rechtschreibfehler hab, schreibe den Roman hier vom Handy aus :joy:

3 Likes