отфильтруйте ответ, имеющий несколько массивов объектов, с возвращаемым значением Observable

Question

Я пытаюсь отфильтровать массив Object в Angular 7 с различными свойствами, и я попытался сделать одну поддельную наблюдаемую (ответ JSON, поступающий из моего сервиса) и пытаюсь сопоставить ее с HTML.

Я не понимаю, как я могу фильтровать массив объектов, которые имеют несколько свойств.

Вот консольный результат моего наблюдаемого.

[Object, Object, Object]
0: Object
cities: Array[1]
id: 1
name: "France"
places: Array[1]
0: Object
place1: "effil tower"
place2: "new discover"
__proto__: Object
texts: Array[1]
0: "a"
__proto__: Object
1: Object
cities: Array[1]
id: 2
name: "Germany"
places: Array[1]
0: Object
place1: ""
__proto__: Object
texts: Array[1]
0: "a"
__proto__: Object
2: Object
cities: Array[3]
0: "Roma"
1: "Milan"
2: "Napoli"
id: 3
name: "Italy"
__proto__: Object

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 5';
  selectedCountry: any;

  cities = {};
  places = {};
  texts = {};

  countries = [{
    'id': 1,
    'name': 'France', 
    'cities': ['Paris'],
    'places': [{ 
       'place1':'effil tower',
       'place2':'new discover'
    }],
   'texts': ['a']
  },
  {
    'id': 2, 
    'name': 'Germany',
     'cities': ['Hamburg'],
     'places': [{ 
       'place1':''
    }],
   'texts': ['a']
  },
  {
    'id': 3, 
    'name': 'Italy',
     'cities': ['Roma', 'Milan', 'Napoli']
  },
  ];

  ngOnInit() {
  }

  onChange(deviceValue) {
    console.log(deviceValue);
    this.getValues(deviceValue).subscribe( data =>{
      console.log(data);
       this.cities = data.filter(x => x.id == deviceValue)[0].cities;
    }

    // this.places = this.countries.filter(x=> x.id == val)[0].places;
    // this.texts = this.countries.filter(x=> x.id == val)[0].texts;
    // console.log(this.cities);
    );
  }

  getValues(val){
    return Observable.of(this.countries);
    console.log(this.countries);
    
  }
}

p {
  font-family: Lato;
}

<hello name="{{ name }}"></hello>

<select name="city" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries"  [value]="country.id">{{country.name}}</option>
  </select>
<div style=" padding-top: 0.5em; " >
  <select id="sel1" name="Country" class="">
    <option *ngFor="let city of cities" [value]="city">{{city}}</option>  
  </select>
</div>
  
  <div style=" padding-top: 1em; ">
     <label *ngFor="let place of places">
  <input type="radio" name="options">{{place}}
</label>
  </div>
  <!-- <div style=" padding-top: 0.5em; " > 
    <label *ngFor="let in of texts">{{in}} :
  <input type="text">
</label>
    </div> -->
    <div style=" padding-top: 1em; ">
      <label *ngFor="let place of texts">{{place}} : 
  <input type="text" >
</label>
      </div>

 

Answer 1

Просто инициализируйте ваши свойства для массивов вместо объектов. Код был

  cities = [];
  places = [];
  texts = [];

Я сделал стеклиц на нем, и в нем было много ошибок консоли. Не уверен, как долго это будет продолжаться, но это ссылка: https://stackblitz.com/edit/angular-yxwpaa