Angular - 我正在尝试从数组对象值的下拉菜单中填充和选择

Posted 2023-03-15

【中文标题】Angular - 我正在尝试从数组对象值的下拉菜单中填充和选择

【英文标题】：Angular - I am trying to populate and select from dropdown menu from array object values

【发布时间】：2021-12-03 10:43:35

【问题描述】：

我在下拉列表和数组对象中遇到了一些问题。

我正在尝试从下拉菜单中选择值，但现在数组值未填充到下拉菜单中。

我没有得到什么是错误。

app.component.ts

import  Component, OnInit  from '@angular/core';
import  Title  from '@angular/platform-browser';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
    
constructor(private title: Title) 

    ngOnInit() 
        this.title.setTitle('Select through Dropdown');
    
    
    selectedCity: String = "--Choose City--";
  
    City: Array<any> = [
        // City=[
         
            name: 'India',
            states: 
            [ 
                 
                    name: 'Karnataka', 
                    
                    cities: ['Bangalore', 'Gulbarga', 'Thumkur', 'Coorg' ]

                 , 
                 
                    name: 'Andhrapradesh',
                    cities: [ 'hyderabadh', 'x', 'Y', 'Z' ] 
                
            ] 
        ,
        
           
            name: 'USA',
            states:
            [
                 
                    stname: 'California',
                    cities: [ 'Los Angeles', 'San Francisco' ]
                , 
                
                 
                    stname: 'Texas', 
                    cities: [ 'Houston', 'Dallas' ] 
                 
            ] 
        ,
    ];
    

    selected = "----"

    changecities(city: any)
        this.selected = city.target.value

        console.log (this.selectedCity );
    
    

app.component.html

<div class="content" style="background-color: rgb(196, 195, 195);">
    <h2 style="text-align: center;">Select Your Choices</h2>

    <div class="card-container" style="padding-bottom: 2em; padding-left: 10em;">
        <label>City : </label>
            <select placeholder="City" [(ngModel)]="selectedCity" (change)="changecities($event)">
            <option>--Choose City--</option>
            <option *ngFor="let city of City" >
                city.cities
            </option>
        </select>
    </div>
    <p>You selected selected</p>    
</div>

<router-outlet></router-outlet>

我无法在下拉菜单中访问城市的值。

如何解决这个问题，谢谢

【问题讨论】：

您想访问哪些城市？您的数据中有多个国家/地区的城市

@AT82 我想在一个下拉菜单中访问所有城市

【参考方案1】：

如果您想在一个下拉列表中显示来自所有国家/地区的所有城市，我想将您拥有的数组展平为字符串数组，而不是在模板中显示，所以您可以做的是声明一个新变量，例如cities，然后映射和展平数据：

this.cities = this.City.map(x => x.states.map(y => y.cities)).flat(2)

然后在模板中：

<option *ngFor="let city of cities">
   city 
</option>

STACKBLITZ