同一 table 中的级联数据下拉列表

Question

我正在尝试做一个级联下拉列表，其中状态 selected 将包含各个状态的区域。小问题是它们都在数据库中的同一个 table 中。

数据库的结构是这样的

各州

     {id: 2526, code: 's_abuja', label: 'Abuja', descr: '', category: 'state'}
     {id: 2527, code: 's_anambra', label: 'Anambra', descr: '', category: 'state'}
     {id: 2528, code: 's_enugu', label: 'Enugu', descr: '', category: 'state'}
     {id: 2529, code: 's_akwa_ibom', label: 'Akwa Ibom', descr: '', category: 'state'}

地区

      {id: 1377, code: 's_abia_1', label: 'Aba North',descr:'',category:'local_government_area'}
      {id: 1378, code: 's_abia_2', label: 'Aba South', descr: '', category: 'local_government_area'}
      {id: 1394, code: 's_abuja_1', label: 'Abaji', descr: '', category: 'local_government_area'}
      {id: 1395, code: 's_abuja_2', label: 'Bwari', descr: '', category: 'local_government_area'}

在我的 angular 应用程序中，我在 select 标签上应用了这个公式

          <select
                class="form-control"
                id="field_civilState"
                name="civilState"
                formControlName="civilState"
                (change)="onChange($event.target.value)"
              >

.ts 文件从 '/model/dictionary.model';

导入 { IDictionary }

            civilStates: IDictionary[];
            lgas: IDictionary[];
          
           ngOnInit(){
           this.lgas = this.civilStates.filter(x => x.category === 1)[0].category;
         }

         onChange(dataValue) {
         this.lgas = this.civilStates.filter(x => x.category === dataValue)[0];
         }

谁能帮忙解决这个难题

Answer 1

.ts

 public tempLga: any[] = [];

 onChange(dataValue): void { 
 this.tempLga = [];
 this.tempLga = this.lgas.filter(e => e.code.includes(dataValue));
 }

.html

       <select
            class="form-control"
            id="field_civilState"
            name="civilState"
            formControlName="civilState"
            (change)="onChange($event.target.value)"
          >

       <select class="form-control">
                <option [ngValue]="null">Please Choose..</option>
                <option *ngFor="let data of tempLga" [value]="data.id"> 
                  {{data.label }}</option>
              </select>

同一 table 中的级联数据下拉列表

Cascading dropdown of data in the same table

angular

typescript

pgadmin