堆栈内存溢出
  繁体   English   中英

Angular 新组件/新属性

[英]Angular new component/ new attributes

 原文  2023-01-29 17:02:15  4   1    html/ angular/ angularjs/ typescript

问题描述

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

html 和 ts:

1 个解决方案

解决方案1
 0  2023-01-29 17:04:15

html：

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

TS： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Angular 不能在新生成的组件中使用 Scss 如何将 html http 响应渲染到 Angular 中的新页面或新组件？ 有角度的最佳实践：为实现可重用性，是否要创建新的CSS类或新组件？ 如何在 Angular 中的新视图/组件上传递和显示计算结果？ Angular：Form-Submit 应该转发到新组件 Angular 2 - 如何在不在新页面中显示app.component.html中的html的情况下路由到新页面 新的html输入属性用法 从 angular 中的产品列表组件中单击时如何将产品详细信息移动到新组件 Append 新的 React 组件 onclick 如何用新列表重新加载组件？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM