使用返回 Observable 过滤具有多个对象数组的响应答案

【问题标题】：filter the response which have multiple array of objects with the return Observable使用返回 Observable 过滤具有多个对象数组的响应
【发布时间】：2020-05-23 00:38:23
【问题描述】：

我正在尝试过滤具有不同属性的 Angular 7 中的 Object 数组，并且我尝试制作一个假的 observable（来自我的服务的 JSON 响应）并尝试映射到我的 HTML。

我不知道如何过滤具有多个属性的对象数组。

这是我的 observable 的控制台结果。

[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>

【问题讨论】：

不确定您对函数的期望，但您的过滤方法是正确的。你只需要调用 onChange 函数并传递 id 。另外，如果您使用的是新的 rxjs，则只需将 Observable.of(this.countries) 替换为 of(this.countries)
你为什么要返回一个 Observable？

标签： javascript angular typescript object filter

【解决方案1】：

只需将您的属性初始化为数组而不是对象。代码是

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

我对它进行了一次堆栈闪电战，它有很多控制台错误。不知道它会持续多久，但这是链接： https://stackblitz.com/edit/angular-yxwpaa

【讨论】：