根据角度 5 中的条件填充城市下拉列表

Posted 2023-02-22

【中文标题】根据角度 5 中的条件填充城市下拉列表

【英文标题】：Populate city drop down according to the condition in angular5

【发布时间】：2018-10-11 15:51:02

【问题描述】：

我想根据上一个选择框中的国家/地区在选择框中显示一个城市名称。我在第一个选择框中显示了国家，但是在点击事件时我无法显示城市，我不知道如何将嵌套的json访问到html中。请帮助。

这是我的 json 文件

  [
    
  "countryName": "India", 
    "cities": [
       
          "id": 1, 
          "name": "Banglaore", 
          "founded": -200, 
          "beautiful": true, 
          "data": 123,
          "keywords": ["Kaveri", "River"] 
      ,
       
          "id": 1, 
          "name": "Pune", 
          "founded": 0, 
          "beautiful": false, 
          "data": "no",
          "keywords": ["FSDF", "FS"] 
      
  ]
,
 
  "countryName": "US", 
  "cities": [
       
          "id": 2, 
          "name": "CA", 
          "founded": -200, 
          "beautiful": true, 
          "data": 123,
          "keywords": ["RT", "SSF"] 
      ,
       
          "id": 2, 
          "name": "NY", 
          "founded": 0, 
          "beautiful": false, 
          "data": "no",
          "keywords": ["GSG", "DG"] 
      
  ]

]

app.component.ts 文件是

import  Component  from '@angular/core';
import  Http,Response  from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 


  constructor(private http: Http)  
public myData;
public v;

ngOnInit()

 this.http.get("assets/file.json")
  .map((res:Response)=> res.json())
  .subscribe(data =>this.myData = data)





onChange(event): void   // event will give you full breif of action
  const newVal = event.target.value;
this.v =newVal;

app.html 文件是

<select (change)="onChange($event)" >
    <option value="0">--All--</option>
    <option *ngFor="let d of myData">
        d.countryName
    </option>
  </select>
  <br/>


  <br/>

  <select >
        <option value="0">--All--</option>
        <option *ngFor="let object of myData" value="object.countryName" [selected]="object.countryName === v">object.cities</option>
    </select>

【参考方案1】：

我对@9​​87654321@ 和states 有一些困惑，但我认为这有点像你要找的东西；

在您的第一个下拉菜单中，您需要这样的内容：

<select (change)="onChange($event)" >
  <option value="0">--All--</option>
  <option *ngFor="let d of myData" [value]="d" >
    d.countryName
  </option>
</select>

因此您的选项值与 countryName 相匹配，您的 onChange 方法将确保 v 属性在更改时设置为对象（包括国家和城市）

<select =>
  <option value="0">--All--</option>
  <option *ngFor="let city of v.cities" value="object.countryName">city.name</option>
</select>

一些旁白： - 您目前正在“链接”您的 rxjs 运算符（并更改 Observable 原型），因为 RxJs 版本 5.5.6 您可以“管道”它们，我认为这种使用运算符的方式最终会消失。因此，如果您可以更改此设置，则值得鼓励。 - 您正在使用通过 Http 获取数据的“旧”方式，现在鼓励使用 HttpClient。 - 看看 Angular 中的 Reactive Forms，它会让你的代码更简洁，更容易推理

考虑到我的言论，你可能会有这样的事情：

export class AppComponent 
    form = new FormGroup(
        country: new FormControl('', [Validators.required]),
        city: new FormControl('', [Validators.required])
    )

    data$ = this.httpClient.get('assets/file.json').pipe(share());

    countries$ = this.data$.pipe(
        map(data => data.map(entry => entry.countryName)),
        startWith([])
    );

    cities$ = this.form.get('country').valueChanges.pipe(
        withLatestFrom(this.data$)
        map(([selectedCountry, allData]) => 
            const entry = allData.find(item => item.countryName === selectedCountry);
            return entry.cities;
        )
        startWith([])
    );

    constructor(private httpClient: HttpClient)  
    

您必须在您的选择上添加formControlName 属性，并且选择选项将需要一个async 管道。 通过使用带有 formControls 的表单，您不需要有 onChange 事件。 countries$get 是由数据调用的结果生成的，cities$get 是由 countrySelect 的 valueChanges + 取数据调用的最后一个值生成的。很优雅。

【讨论】：

你能告诉我我的视图页面如何

--All-- d.countryName --全部-- city.name

替代方式是什么意思？