html - 如何从 Angular 中的 JSON 内的列表中获取值？

Question

我需要从这个 JSON 中获取城市内部的值，但我不能:

{ 
"id":0,
"department":"Amazonas",
"cities":["Leticia","Puerto Bayarta",]
},
{ 
"id":1,
"department":"Antioquia",
"cities":["Medellin","Bello",]
}

这些是我制作的组件和服务:

cities.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CitiesService {
  constructor(private http: HttpClient) {}
  getJSON(url: string) {
    return this.http.get(url);
  }
}

组件有一个接口(interface):

nueva-organizacion.component.ts

import { Component, OnInit } from '@angular/core';

import { CitiesService } from 'src/app/services/cities.service';

interface City{
  department: string;
  cities: string[];
}

@Component({
  selector: 'app-nueva-organizacion',
  templateUrl: './nueva-organizacion.component.html',
  styleUrls: ['./nueva-organizacion.component.css'],
})
export class NuevaOrganizacionComponent implements OnInit {
  public cities: City[] = [];
  constructor(
    public cities: CitiesService,
  ) {}

  ngOnInit(): void {
    this.cities
      .getJSON(
        'https://raw.githubusercontent.com/marcovega/colombia-json/master/colombia.min.json'
      )
      .subscribe((res: any) => {
        this.cities = res;
      });
  }

最后，我想在选择器中显示城市:

nueva-organizacion.component.html

<div class="form-input">
   <select id="city" class="custom-select">
      <option selected>Choose one...</option>
      <option *ngFor="let city of cities">
         {{ city.cities }}
      </option>
   </select>
</div>

我想在选择器中得到这样的东西:

Choose one...
Leticia
Puerto Bayarta
Medellin
Bello

但我明白了:

Choose one...
Leticia, Puerto Bayarta
Medellin, Bello

也许正确的方法是使用索引 {{ city.cities[] }} 但我不知道如何。

Answer 1

请记住，在 NuevaOrganizacionComponent 内部，您必须具有相同名称的属性:'cities'，首先是城市数组，其次是城市服务。
另外我建议您使用两个选择而不是一个，第一个选择部门，第二个选择城市。
代码将如下所示:
nueva-organizacion.component.ts:

import { Component, OnInit } from '@angular/core';
import { CitiesService } from 'src/app/services/cities.service';

@Component({
  selector: 'app-nueva-organizacion',
  templateUrl: './nueva-organizacion.component.html',
  styleUrls: ['./nueva-organizacion.component.css'],
})
export class NuevaOrganizacionComponent implements OnInit {
  public departmentsArr = [] 
  public departmentSelected:any = null;
  public citySelected:any = null;
  constructor(
    public citiesServ: CitiesService,
  ) {}

  ngOnInit(): void {
    const urlCities = "https://raw.githubusercontent.com/marcovega/colombia-json/master/colombia.min.json"
    this.citiesServ.getJSON(urlCities)
    .subscribe((res: any) => {
        this.departmentsArr = res;
    });
  }
  getCities(){
      return this.departmentsArr.find(department => department.id == this.departmentSelected).ciudades
  }
  alertSelection(){
      const departmentName = this.departmentsArr.find(department => department.id == this.departmentSelected).departamento;
      const cityName = this.citySelected;
      alert(`
      You selected the department: ${departmentName} and the city: ${cityName}`)
  }
}

nueva-organizacion.component.html

<div class="form-input">
    <label for="departmentSelector">Select your department</label>
   <select id="departmentSelected" class="custom-select" name="departmentSelector" [(ngModel)]="departmentSelected">
      <option value="null">Choose one department...</option>
      <option 
        *ngFor="let department of departmentsArr"
        [value]="department.id">
         {{ department.departamento }}
      </option>
   </select>
</div>

<div class="form-input" *ngIf="departmentSelected">
    <label for="citySelector">Select your city</label>
    <select id="citySelector" class="custom-select" name="citySelector"  [(ngModel)]="citySelected">
      <option selected>Choose one city...</option>
      <option 
        *ngFor="let city of getCities()"
        [value]="city">
         {{ city }}
      </option>
   </select>
</div>

<button (click)="alertSelection()">WHAT WAS SELECTED?</button>

也请验证 表单模块 被导入到你的 app.module.ts 或 yourSubmodule.module.ts。这对于启用 ([ngModule]) 功能很重要。

import {FormsModule} from "@angular/forms";
// Other things
imports: [
    // Other modules
    FormsModule
  ],