Question

我在下面创建了下表来表示特定作业的层次结构。然后我在java中创建了一些CRUD函数，以及＃34; createJob＆＃34;，＆＃34; getJob＆＃34;，＆＃34; updateJob＆＃34;和＆＃34; deleteJob＆＃34;在这些表中。

现在我想在用户界面上实现从这些操作中获得的数据。我正在寻找最简单的用户界面，我可能会在下拉列表中列出该作业，然后根据我的选择，我可以选择作业类型，然后根据该选择选择作业规范。可以在每个下拉列表上执行这些CRUD功能。要添加新作业，请重命名，等等。

最简单的方法是什么？我一直在寻找一些API，因为我相信这会是一种常见的东西。这些类型的下拉可能有一个更具描述性的术语，这将有助于我的搜索。

编辑经过进一步研究，我正在寻找的是一个可编辑的级联下拉列表＆＃34;。

编辑2 我能够看到一些使用Angular创建级联下拉列表的好例子。我能够在下面创建app.component.ts和app.component.html。我可以显示下拉列表，但它们不是基于所选作业的级联。我的代码中我做错了什么？此外，一旦这工作正常，我如何准备代码以利用我之前创建的java函数而不是我的硬编码值？

+---------+---------+
| Id      |    Job  |                        
+---------+---------+
|     1  |Developer |                           
|
|     2  |QA Tester |  


+---------+---------+---------+-----+
| Id      |    Job_Type   | Job_Id                          
+---------+---------+---------+-----+
|     1 |Java Developer   |       1 |                           
|     2 |JS Developer     |       1 |
|     3 |FrontEnd Tester  |       2 |
|     4 |Backend Tester   |       2 |
|     5 |Php Developer    |       1 | 

+---------+---------+---------+----+-----------+
| Id      |    Job_Specification   | Job_Type_Id                          
+---------+---------+---------+----+-----------+
|     1 |Spring Developer          |       1 |                           
|     2 |Angular Developer         |       2 |
|     3 |UI Tester                 |       3 |
|     4 |Mobile Tester             |       3 |
|     5 |Hibernate Developer       |       1 |

APP.COMPONENT.TS

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Roles!';
  selectedRole= 0;
  selectedProviderType = 0;

  providerType = [];
  classification = [];


  onSelectRole(role_id: number) {
    this.selectedRole = role_id;
    this.selectedProviderType = 0;
    this.classification = [];
    this.providerType = this.getProviderType().filter((item) => {
      return item.role_id === Number(role_id)
    });
  }
    onSelectProviderType(providerType_id: number) {
      this.selectedProviderType = providerType_id;
      this.classification = this.getClassification().filter((item) => {
        return item.providerType_id === Number(providerType_id)
      });
    }

getRoles() {
  return [
    { id: 1, name: 'Developer' },
    { id: 2, name: 'QA Tester' },
  ];
}

getProviderType() {
  return [
    { id: 1, role_id: 1, name: 'Java Developer' },
    { id: 2, role_id: 1, name: 'JS Developer' },
    { id: 3, role_id: 2, name: 'FrontEnd Tester' },
    { id: 4, role_id: 2, name: 'Backend Tester' },
    { id: 5, role_id: 3, name: 'Php Developer' },
  ]
}

getClassification() {
  return [
    { id: 1, providerType_id: 1, name: 'Spring Developer' },
    { id: 2, providerType_id: 1, name: 'Angular Developer ' },
    { id: 3, providerType_id: 1, name: 'UI Tester' },
    { id: 4, providerType_id: 1, name: 'Mobile Tester' },
    { id: 5, providerType_id: 2, name: 'Hibernate Developer' },
  ]
}
}

APP.COMPONENT.HTML

</div>
<div class="form-group">
  <label class="control-label" for="Role">Role:</label>
  <select *ngIf="getRoles()" [(ngModel)]="selectedRole" (change)="onSelectRole($event.target.value)" class="form-control input-lg" id="role">
     <option value="0">Select Role</option>
    <option *ngFor="let role of getRoles()" value= {{role.id}}>{{role.name}}</option>
  </select>
</div>

<div class="form-group">
  <label class="control-label" for="ProviderType">Provider Type:</label>
  <select *ngIf="getProviderType()" [(ngModel)]="selectedProviderType" (change)="onSelectProviderType($event.target.value)" class="form-control input-lg" id="providerType">
      <option value="0">Select Provider Type</option>
    <option *ngFor="let providerType of providerTypes" value= {{providerType.id}}>{{providerType.name}}</option>
  </select>
</div>

<div class="form-group">
  <label class="control-label" for="Classification">Classification:</label>
  <select class="form-control input-lg" id="classification">
      <option *ngIf="!selectedProviderType" value="0">Select Classification</option>
      <option *ngFor="let classification of classifications" value= {{classification.id}}>{{classification.name}}</option>
  </select>
</div>

<div class="form-group">
  <label class="control-label" for="Specification">Specification:</label>
  <select class="form-control input-lg" id="city">
      <option *ngIf="!selectedClassification" value="0">Select Specification</option>
      <option *ngFor="let specification of specifications" value= {{specification.id}}>{{specification.name}}</option>
  </select>
</div>

将CRUD功能附加到下拉菜单

0 个答案: