typescript Angular 新组件/新属性

tzxcd3kk  于 2023-01-31  发布在  TypeScript
关注(0)|答案(1)|浏览(167)

我想当我点击新的组件按钮，添加名称，描述，选择类型，并添加新的属性，如默认值和类型，所有信息保存和新按钮出现在拖放部分。请帮助我如何做到这一点。
HTML和TS：

typescript

1条答案

按热度按时间
sgtfey8w

sgtfey8w1#

网页：

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

测试：

import { WorkspaceComponent } from './../workspace/workspace.component';
import { Component, OnInit } from '@angular/core';

import {DragDropModule} from '@angular/cdk/drag-drop';
import {ChangeDetectionStrategy, Inject} from '@angular/core';

import { ApiService } from '../services/api.service';
import {TuiDialogService} from '@taiga-ui/core';
import {FormArray, Validators} from '@angular/forms';
import { TabService } from '../services/tab.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-drag-and-drop',
  templateUrl: './drag-and-drop.component.html',
  styleUrls: ['./drag-and-drop.component.css']
})
export class DragAndDropComponent implements OnInit {
  fb: any;
  profileForm: any;
  DragAndDropForm: FormGroup

  constructor( @Inject(TuiDialogService) private readonly dialogService: TuiDialogService,
  @Inject(ApiService) public apiService: ApiService,) { }

  onSubmit(): void {
    console.log(this.DragAndDropForm.value);
  }

  
  apps = 
  [
    {
      id: 1,
      name: "Instagram"
    },
    {
      id: 2,
      name: "Facebook"
    }
  ];
  selectedApps = [];

  // allowDrop(event) {
  //   event.preventDefault();
  // }

  // drag(event, appID: number) {
  //   event.dataTransfer.setData("dragApp", appID);
  //   return true;
  // }

  // drop(event) {
  //   const itemIndex = event.dataTransfer.getData("dragApp") - 1;
  //   this.selectedApps.push(this.apps[itemIndex]);
  //   console.log(this.selectedApps);
  // }

//   showDialog(): void {
//     this.dialogService
//         .open(`This is a plain string dialog`, {label: `Heading`, size: `s`})
//         .subscribe();
// }

showDialogWithCustomButton(): void {
    this.dialogService
        .open(`Good, Anakin, Good!`, {
            label: `Star wars. Episode III`,
            size: `s`,
            data: {button: `Do it!`},
        })
        .subscribe();
}

  exampleForm = new FormGroup({
      nameOfComponent: new FormControl(``),
      description: new FormControl(''),
  });

  testForm = new FormGroup({
    testValue: new FormControl(),
  });

  componentTypes = ['Einspeiser', 'Versorgung' ,'Vertrag', 'Markt', 'Speicher', 'Umwandler', 'Knoten/Bilanz', 'Container'];
  chosenComponent = this.componentTypes[0];

  open = false;

  showDialog(): void {
      this.open = true;
  }

  submitComponent(): void{
    this.apiService.postComponent("document.getElementById('nameInput').value", "desc", "http://www.w3.org/2000/svg").subscribe((result)=>{console.warn(result)});
    console.log(this.apiService.updateComponents());
  }

  ngOnInit() {
    this.DragAndDropForm = new FormGroup({
      fullName: new FormControl(),
      // Create NewAttribute form group
      NewAttribute: new FormGroup({
        NewAttributeName: new FormControl(),
        type: new FormControl()
      })
    });
  }

  IsHidden = true;

  addNewAttributeButtonClick() {
    this.IsHidden = !this.IsHidden;
    }

  addNewAttributeFormGroup(): FormGroup{
    return this.fb.group({
      defaultValue:['', Validators.required],
      type:['', Validators.required]
    });
  }
}
赞(0）分享  回复(0）举报  2023-01-31
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com