使用加号按钮复制相同的sql填充下拉列表以添加另一个并使其空间动态增加

Question

我需要在其旁边有一个加号，并让它添加/删除重复，并且表单的部分根据单击的内容动态增长和动态减少。我想将其变成一个函数，但作为一个新开发人员，我不太知道如何做到这一点。这是 Angular 中的，带有用于列表人口的 spring 后端

<section>
    <br>
    <p>
        <label for="sysapp" class="appRole">System Application
        </label>
        <app-sysapp-list id="sysapp" (selectedSysAppEvent)="updateAppName($event)"></app-      sysapp-list>
    </p>
    <p>
        <label for="rolename" class="appRole">System Role Name</label>
          
        <app-rolename-list id="rolename" [appName]="appName"></app-rolename-list>
    </p>
</section>

我尝试添加添加和删除按钮，并尝试将其全部放入 click() 中。我见过这是 TurboTax，点击添加或删除按钮会使空间增加或减少，但我不知道如何将 html 代码转换为函数。

Answer 1

要在 Angular 中动态添加和删除表单的各个部分，您需要使用一些 TypeScript 来处理逻辑。这是一个帮助您入门的基本示例：

1. 修改您的 HTML:

<section *ngFor="let section of sections; let i = index">
    <br>
    <p>
        <label for="sysapp{{i}}" class="appRole">System Application
        </label>
        <app-sysapp-list id="sysapp{{i}}" (selectedSysAppEvent)="updateAppName($event)"></app-sysapp-list>
    </p>
    <p>
        <label for="rolename{{i}}" class="appRole">System Role Name</label>
        <app-rolename-list id="rolename{{i}}" [appName]="appName"></app-rolename-list>
    </p>
    <button (click)="removeSection(i)">Remove</button>
</section>
<button (click)="addSection()">Add Section</button>

2. 更新您的组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  sections: any[] = []; // Initialize an empty array to hold sections

  // Add a section
  addSection() {
    this.sections.push({});
  }

  // Remove a section
  removeSection(index: number) {
    this.sections.splice(index, 1);
  }

  // You can keep your existing updateAppName function here
}

在此示例中，我们使用

*ngFor

来循环

sections

数组，并且对于每个部分，我们都显示表单元素。

addSection

函数将一个空对象推送到

sections

数组，创建一个新部分。

removeSection

函数按索引删除节。

这是一个帮助您入门的基本示例。根据您的具体用例，您可能需要调整此代码以满足您的要求。如果您有更复杂的逻辑，您可能需要考虑使用 Angular 的响应式表单来管理动态表单元素。