Angular 新组件/新属性

Question

我希望当我单击新组件按钮并添加名称、描述、选择类型并添加新属性（如默认值和类型）时，所有要保存的信息以及新按钮出现在拖放部分中。请帮我怎么做。

HTML: 在 cmets

Answer 1

<button
tuiButton
type="button"
size="m"
class="tui-space_right-3 tui-space_bottom-3"
(click)="showDialog()"
>
Neue Komponente
</button>

<ng-template
    let-observer
    [tuiDialogOptions]="{label: 'Neue Komponente', size: 's'}"
    [(tuiDialog)]="open"
>
    <form action="http://localhost:8080/komponente/save"
        method = "POST"
        [formGroup]="exampleForm"
        (ngSubmit)="submitComponent(); observer.complete()"
    >
        <p></p>
        <tui-input
            tuiAutoFocus
            formControlName="nameOfComponent"
            id="nameInput"
        >
            Name
        </tui-input>
        <tui-input
            tuiAutoFocus
            formControlName="description"
        >
            Beschreibung
        </tui-input>
        
        <tui-select
        #select
        class="b-form"
        [(ngModel)]="chosenComponent"
        >Komponententyp
        <tui-data-list *tuiDataList>
            <tui-opt-group label="">
                <button
                    *ngFor="let component of componentTypes"
                    tuiOption
                    [value]="component"
                >
                    {{ component }}
                </button>
            </tui-opt-group>
        </tui-data-list>
        </tui-select>  

        <button 
                 tuiButton 
                 type="button" 
                 size="m"
                 appearance="secondary"
                 class="tui-space_right-3 tui-space_bottom-3" 
                 (click)="addNewAttributeButtonClick()"
            >
                 Neues Attribut
            </button>

        <form [formGroup]="DragAndDropForm" (ngSubmit)="onSubmit()" class="form-horisontal"></form>
          <div class="form-group" [hidden]="IsHidden">
            <label class="col-md-8 control-label" for="defaultValue">
                Default-Wert
            </label>
            <div class="col-md-8">
                <input id="defaultValue" formControlName="defaultValue" type="number" class="form-contol">
            </div>
          </div>

          <label class="col-md-8 control-label"></label>
                <div class="col-md-8" [hidden]="IsHidden">
                  <label class="radio-inline" for="type">
                    Typ:
                  </label>
                  <label class="radio-inline">
                    <input id="radiobutton" type="radio" value="option1"
                           name="radiobutton">int
                  </label>
                  <label class="radio-inline">
                    <input id="radiobutton" type="radio" value="option2"
                           name="radiobutton">float
                  </label>
                </div>
      
        <p>
            <button
                tuiButton
                type="submit"
            >
                Speichern
            </button>
        </p>
    </form>
</ng-template>

  <tui-accordion class="container" cdkDropList>
    <tui-accordion-item>
        Einspeiser
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                <svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 21h18M5 21V9l5 4V9l5 4h4"/><path d="M19 21v-8l-1.436-9.574A.5.5 0 0 0 17.069 3h-1.145a.5.5 0 0 0-.494.418L14 12m-5 5h1m4 0h1"/></g></svg>
            </div>
            <div #content>
                Kraftwerk
            </div>
              <div class="kraftwerk-box" cdkDrag>
                <svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9 16v-5a2 2 0 1 0-4 0m10 5v-5a2 2 0 1 1 4 0"/><path d="M12 16V6a3 3 0 0 1 6 0M6 6a3 3 0 0 1 6 0M3 16h18v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2z"/></g></svg>
              </div>
              <div #content>
                Wasserquelle
            </div>
              <div class="kraftwerk-box" cdkDrag>
                <svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#85b6ff" d="m2.475 19.6l1.2-6q.125-.7.688-1.15Q4.925 12 5.65 12h12.7q.725 0 1.288.45q.562.45.687 1.15l1.2 6q.2.95-.412 1.675Q20.5 22 19.55 22H4.45q-.95 0-1.562-.725q-.613-.725-.413-1.675ZM6 3q0 .425-.287.712Q5.425 4 5 4H4q-.425 0-.712-.288Q3 3.425 3 3t.288-.713Q3.575 2 4 2h1q.425 0 .713.287Q6 2.575 6 3ZM4.45 20H11v-2H4.85l-.4 2ZM7.525 6.5q.3.3.3.713q0 .412-.3.712l-.7.7q-.275.275-.687.275q-.413 0-.713-.275q-.3-.3-.3-.713q0-.412.3-.712l.7-.7q.275-.275.687-.275q.413 0 .713.275ZM5.25 16H11v-2H5.65ZM12 7Q9.925 7 8.463 5.537Q7 4.075 7 2h2q0 1.25.875 2.125T12 5q1.25 0 2.125-.875T15 2h2q0 2.075-1.462 3.537Q14.075 7 12 7Zm0-5Zm0 6q.425 0 .713.287Q13 8.575 13 9v1q0 .425-.287.712Q12.425 11 12 11t-.712-.288Q11 10.425 11 10V9q0-.425.288-.713Q11.575 8 12 8Zm1 12h6.55l-.4-2H13Zm0-4h5.75l-.4-2H13Zm3.475-9.5q.275-.275.7-.275q.425 0 .7.275l.7.7q.3.3.313.7q.012.4-.288.7q-.3.3-.712.3q-.413 0-.713-.3l-.7-.7q-.275-.3-.287-.7q-.013-.4.287-.7ZM21 3q0 .425-.288.712Q20.425 4 20 4h-1q-.425 0-.712-.288Q18 3.425 18 3t.288-.713Q18.575 2 19 2h1q.425 0 .712.287Q21 2.575 21 3Z"/></svg>
              </div>
              <div #content>
                Solaranlage
            </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Versorgung
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                <svg xmlns="http://www.w3.org/2000/svg" width="4em" height="4em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="#85b6ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M3 21h18M5 21V9l5 4V9l5 4h4"/><path d="M19 21v-8l-1.436-9.574A.5.5 0 0 0 17.069 3h-1.145a.5.5 0 0 0-.494.418L14 12m-5 5h1m4 0h1"/></g></svg>
            </div>
            <div #content>
                Kraftwerk
            </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Verträge
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                <svg style="color: rgb(133, 182, 255);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M292.7 342.3C289.7 345.3 288 349.4 288 353.7V416h62.34c4.264 0 8.35-1.703 11.35-4.727l156.9-158l-67.88-67.88L292.7 342.3zM568.5 167.4L536.6 135.5c-9.875-10-26-10-36 0l-27.25 27.25l67.88 67.88l27.25-27.25C578.5 193.4 578.5 177.3 568.5 167.4zM256 0v128h128L256 0zM256 448c-16.07-.2852-30.62-9.359-37.88-23.88c-2.875-5.875-8-6.5-10.12-6.5s-7.25 .625-10 6.125l-7.749 15.38C187.6 444.6 181.1 448 176 448H174.9c-6.5-.5-12-4.75-14-11L144 386.6L133.4 418.5C127.5 436.1 111 448 92.45 448H80C71.13 448 64 440.9 64 432S71.13 416 80 416h12.4c4.875 0 9.102-3.125 10.6-7.625l18.25-54.63C124.5 343.9 133.6 337.3 144 337.3s19.5 6.625 22.75 16.5l13.88 41.63c19.75-16.25 54.13-9.75 66 14.12C248.5 413.2 252.2 415.6 256 415.9V347c0-8.523 3.402-16.7 9.451-22.71L384 206.5V160H256c-17.67 0-32-14.33-32-32L224 0H48C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48V448H256z" fill="#85b6ff"></path></svg>
            </div>
            <div #content>
                Kaufvertrag
            </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Märkte
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                Kraftwerk
              </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Speicher
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                Kraftwerk
              </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Umwandler
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                Kraftwerk
              </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Knoten/Bilanzen
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                Kraftwerk
              </div>
        </ng-template>
    </tui-accordion-item>
    <tui-accordion-item>
        Container
        <ng-template tuiAccordionItemContent>
            <div class="kraftwerk-box" cdkDrag>
                Kraftwerk
              </div>
        </ng-template>
    </tui-accordion-item>
</tui-accordion>