onchange onchange 下拉列表州、国家、城市

如何解决onchange onchange 下拉列表州、国家、城市

如果我在前端应用程序中有一个像 State、country、city 这样的示例，其中包含来自后端的 angular 和 sql 数据。如何使用三个下拉列表使 onchange 依赖于另一个 onchange？

以数据库为例：

State   (id: 1,2,3 ; state  : a,b,c                   );
Country (id: 1,3 ; country: d,e,f; state_id   : 3,2);
City    (id: 1,3 ; city   : g,h,i; country_id : 1,3,2);
(with foreign key from country to state,and from city to country)

export class typestate {
    id: number
    state: string
}

import { typestate } from "./type-state"

export class typeCountry {
    id: number
    country: string
    state_id: typestate
}

import { typeCountry } from "./type-country"

export class typeCity {
    id: number
    city: string
    country_id: typeCountry
}

以 typestate、typeCountry 和 typeCity 作为类的 HTML 示例。

<div class="container">
  <div class="title" style="text-align: center;margin-top: 30px; font-size: 30px;">
    <p><b>SELECTION</b></p>
  </div>
  <div class="card my-5">
    <div class="card-body">
      <form>
        <div class="form-group">
          <!-- STATE -->
          <label for="selection">
            <p><b>State</b></p>
          </label>
          <select value="selectt" class="form-control" id="structure" (change)="onChangeFirst($event.target.value)" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array1 of state; index as i">
              {{ array1.typestate }} 
            </option>
          </select>

          <label></label>

          <!-- COUNTRY -->
          <p><b>Country</b></p>
          <select [(ngModel)]="selectedindex" style="margin-top: 30px;" (change)="onChangeSecond($event.target.value)" value="selection" class="form-control" id="selectt" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array2 of selectedElement; index as i">
              {{ array2.typeCountry }}
            </option>
          </select>

          <label></label>

          <!-- CITY -->
          <p><b>City</b></p>
          <select [(ngModel)]="selectedindexTwo" style="margin-top: 30px;" value="selection" class="form-control" id="selectt" name="selection">
            <option selected disabled>
              Select
            </option>
            <option [value]="i" *ngFor="let array3 of selectedElementTwo; index as i">
              {{ array3.typeCity }}
            </option>
          </select>
        </div>
      </form>
    </div>
  </div>
</div>

如何让城市根据 onChangeSecond 条件下的国家/地区更改时间读取值？ （用 selectedElementTwo = [] 和 selectedindexTwo = number 的 HTML 怎么样）

city = City[]
country = Country[]
state = State[]

selectedElement = []
selectedindex = number

onChangeFirst(index: number) {
    this.selectedElement = []
    this.country.forEach(t => {
      if (t.state_id.id !== undefined) {
       if (t.state_id.id === this.state[index].id) {
          this.selectedElement.push(t)
       }
      }
    })
    this.selectedindex = 0;
    this.onChangeSecond(0);
  }

  onChangeSecond(index: number) {
-----> ?????????????????
  }

}

解决方法

我不太确定这是否是您要找的，但试试这个https://stackblitz.com/edit/angular-playground-sjeqbv?file=app/app.component.ts

,

这是解决方案：

onChangeSecond(index: number) {
this.selectedElementTwo = []
this.city.forEach(t => {
  if (t.country_id.id !== undefined) {
   if (t.country_id.id === this.selectedElement[index].id) {
      this.selectedElementTwo.push(t)
   }
  }
})
this.selectedIndexTwo = 0;

}