Textbox Builder UI-Muster ähnlich wie Listbuilder UI-Muster

Question

Ich bin auf der Suche nach einem Freiform-Text-Box Builder fast ähnlich wie der Listbuilder wie im Bild anbei. Ich muss Werte in das Textfeld am Frontend HTML eingeben und beim Klicken auf die Schaltfläche Hinzufügen sollte der Wert in das Textfeld auf der rechten Seite verschoben werden. Und der Benutzer sollte in der Lage sein, mehrere Eingabewerte hinzuzufügen und sie dem Textfeld hinzuzufügen. Das gleiche wie das Listenfeld im Bild. aber ich möchte es mit textbox machen. Irgendwelche Vorschläge? Ich verwende Angular2 Typescript und HTML, um dies zu tun.

See Image here

Answer 1

Können Sie die gleiche Logik implementieren, wenn Sie zwei Arrays hatten die beiden Listen zu vertreten?

Da dies das Angular-Äquivalent ist - implementieren Sie Ihre Logik zum Verschieben von Elementen zwischen zwei Arrays und verwenden Sie dann Angular für Ihre visuelle Darstellung dieser Arrays (dh erstellen Sie zwei <select> Elemente, die ngFor verwenden, um über diese beiden Arrays zu iterieren Ihre Liste von <options>)