角度 7 可观察数组过滤错误

Question

我是 Angular 的新手。 目前使用 Angular 7 版本。 我正在尝试使用 Observable 中的 filter() 方法进行过滤操作。 我创建了一个服务来注入 Httpclient 以从 json 文件加载数据。 数据正在从 json 加载。 现在我正在尝试基于 EventEmitter 过滤数据。

我收到过滤器不是功能错误

country-load.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, filter, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs'
import 'rxjs';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { of } from 'rxjs/internal/observable/of';

/* interface ServerData {
  shows: Show[];
} */


@Injectable({
  providedIn: 'root'
})
export class CountryLoadService {

  constructor(private http : HttpClient ) {}


  // HTTP get operation to fetch the port data from static JSON
fetchCountry(){
  return this.http.get("assets/data/port_data.json").pipe(map((res) => of(res)));
}
}

header.component.ts

import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { CountryLoadService } from './../country-load.service';
import { HttpClient } from '@angular/common/http';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { Observable } from 'rxjs/internal/Observable';
import { toArray } from 'rxjs/internal/operators/toArray';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  //@Input() result:string="";
  @Output() changed = new EventEmitter<string>();

  constructor(private countryLoadService : CountryLoadService) {}

  countryData;

  ngOnInit() {
  this.countryLoadService.fetchCountry().subscribe(data => {
    console.log(data);
    console.log(this.countryData);
    this.countryData = data;
    console.log(this.countryData);
  })

  }

  onChange(countryName:string){
    this.changed.emit(countryName);
  }
}

头文件.component.html

<table width="100%" border="0" cellpadding="0" cellspacing="0"
      height="8">
      <tr>
        <td width="70%" align="left" valign="middle" class="toplinks">
          <app-menutab></app-menutab>
        </td>

        <td width="5%" align="right" valign="middle" class="toplinks">
          <label class="toplinks">Load Country</label>
        </td>
        <td width="10%" align="right" valign="middle" class="toplinks">
          <select #input1 style="width: 135px; font-family: Arial narrow; font-size: 8pt"
          name="countryCode" (change)="onChange(input1.value)">
          <option *ngFor="let cn of (countryData | async)">{{cn.country_name}}</option>
          <!-- <input [(ngModel)]="countryData[index]" placeholder="item"> -->
        </select>
        </td>
      </tr>
    </table>

创建-tariff.component.ts

import { Component, OnInit } from '@angular/core';
import { CountryLoadService } from './../country-load.service';
import { Observable, Subject, asapScheduler, pipe, of, from,
  interval, merge, fromEvent } from 'rxjs';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import { map, startWith, filter } from 'rxjs/operators';
import 'rxjs';
import { Country } from './Country'
import { concat } from 'rxjs/internal/observable/concat';

@Component({
  selector: 'app-create-tariff',
  templateUrl: './create-tariff.component.html',
  styleUrls: ['./create-tariff.component.css']
})


export class CreateTariffComponent implements OnInit {

  //jsonData : Observable<any>[] = [];
  //jsonData : Country[] = [];
  jsonData;

  constructor(private currencyLoadService : CountryLoadService) {}

  ngOnInit() {
    this.currencyLoadService.fetchCountry().subscribe(data => {
      console.log(typeof(data));
      this.jsonData = data;
      //this.jsonData = Object.entries(data).map(([type, value]) => ({type, value}));
      console.log(this.jsonData);
    })

    }
  onChanged(value:string){
    if(value!='')
    {
      console.log('foo1111');
      console.log(this.jsonData);
      this.jsonData = this.jsonData.filter(res =>res.country_name.startsWith(value));
      //this.jsonData = this.jsonData.map(resp => resp.filter(res => res.country_name.startsWith(value)));
      //const source = from(this.jsonData);
      //const ex = source.pipe(filter(res => res.country_name.starstWith(value)));
      }
      else{
        this.currencyLoadService.fetchCountry().subscribe(
            (data => {
              this.jsonData = data;})
          );
      }
  }

}

创建-tariff.component.html

<app-header (changed)="onChanged($event)"></app-header>
        <span *ngFor="let item of (jsonData | async)">{{item.currency}}</span>

端口数据.json

[
    {
        "country_name": "Germany",
        "load_port": [
            "DEBRV06",
            "DEBRVTM",
            "DEHAMCA",
            "DEHAMEK"
        ],
        "currency": "EUR"
    },
    {
        "country_name": "Denmark",
        "load_port": [
            "DKAARPT",
            "DKCPHTM"
        ],
        "currency": "DKK"
    },
    {
        "country_name": "China",
        "load_port": [
            "CNIWNCT",
            "CNIWNMC",
            "CNNANCT",
            "CNNPOYD"
        ],
        "currency": "CNY"
    }
]

当尝试根据从 EventEmitter 收到的值进行过滤时，出现以下错误。

我尝试了从互联网上收集的不同选项，但直到现在都没有运气。

任何帮助将不胜感激。

ERROR TypeError: this.jsonData.filter is not a function
    at CreateTariffComponent.push../src/app/create-tariff/create-tariff.component.ts.CreateTariffComponent.onChanged (create-tariff.component.ts:40)
    at Object.eval [as handleEvent] (CreateTariffComponent.html:3)
    at handleEvent (core.js:19628)
    at callWithDebugContext (core.js:20722)
    at Object.debugHandleEvent [as handleEvent] (core.js:20425)
    at dispatchEvent (core.js:17077)
    at core.js:18567
    at SafeSubscriber.schedulerFn [as _next] (core.js:10250)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)

编辑 1请查看控制台日志我得到的这个 json 数据

Observable {_isScalar: true, _subscribe: ƒ, value: Array(3)}
value: Array(3)
0: {country_name: "Germany", load_port: Array(4), currency: "EUR"}
1: {country_name: "Denmark", load_port: Array(2), currency: "DKK"}
2: {country_name: "China", load_port: Array(4), currency: "CNY"}
length: 3
__proto__: Array(0)
_isScalar: true
_subscribe: ƒ (subscriber)
__proto__: Object

编辑 2这就是我在执行 toPromise() 时在控制台中得到的

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state: true
__zone_symbol__value: Array(3)
0: {country_name: "Germany", load_port: Array(4), currency: "EUR"}
1: {country_name: "Denmark", load_port: Array(2), currency: "DKK"}
2: {country_name: "China", load_port: Array(4), currency: "CNY"}
length: 3
__proto__: Array(0)
__proto__: Object

Answer 1

 data = [ { "country_name": "Germany", "load_port": [ "DEBRV06", "DEBRVTM", "DEHAMCA", "DEHAMEK" ], "currency": "EUR" }, { "country_name": "Denmark", "load_port": [ "DKAARPT", "DKCPHTM" ], "currency": "DKK" }, { "country_name": "China", "load_port": [ "CNIWNCT", "CNIWNMC", "CNNANCT", "CNNPOYD" ], "currency": "CNY" } ]; value = "Germany"; var jsonData = data.filter(res =>res.country_name.startsWith(value)); console.log(jsonData)

对我来说看起来很不错。 尝试了解您发送的数据是否实际上是对象数组，而不是字符串或其他内容。

好吧，就像我想的那样，您的 get 请求不正确。

fetchCountry(){
  return this.http.get("assets/data/port_data.json").toPromise().then(d=>d);
}

当您收到标题组件时：

this.countryData = this.countryLoadService.fetchCountry();

Answer 2

this很可能在onChanged是不正确的。 它以某种方式编译得很好，但在运行时它可能不是你所期望的，可能类似于MapSubscriber 。