以角度 2 操作从 http 请求返回的数据

Question

在学习和理解 angular 2 的过程中，我遇到了这个问题。我有一项服务可以发出 http get 请求。

import { Injectable } from '@angular/core';
import { Http, Response, } from '@angular/http';
import { Observable } from 'rxjs/Rx'

import { LanguagesResponse } from '../shared/model/languages/languages-response';

@Injectable()
export class HttpLanguageService {

    constructor(private http: Http) { }

    getLanguages(): Observable<LanguagesResponse> {
        return this.http.get('http://192.168.99.100:8888/em-deployer/ws/languages?pretty=true&expand=true').map(this.extractData)
            .catch(this.handleError);
    }


    private extractData(res: Response) {
        let body = res.json();
        console.log(body);
        return body || {};
    }

    private handleError(error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

我有一个组件负责获取服务结果并将其放入模板中。 (ngFor)

import { Language } from "../shared/model/languages/language";
import { HttpLanguageService } from '../http-services/http-language.service';
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-iate-quick-mode',
    templateUrl: './quick-mode.component.html',
})
export class QuickModeComponent implements OnInit {

    languages: Language[];
    errorMessage: string;
    sourceNonEuLanguages: boolean = true;
    targetNonEuLanguages: boolean = true;

    constructor(private httpLanguageService: HttpLanguageService) {
    }

    ngOnInit() {
        this.getLanguages();
        console.log(this.languages);
    }

    getLanguages() {
        this.httpLanguageService.getLanguages()
            .subscribe(
            (languages) => {
                this.languages = languages.items;
                console.log(this.languages);
            },
            error => this.errorMessage = <any>error,
        );
    }

}

一个自定义管道，它将根据返回数组的布尔值返回一些结果。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'languagesFilter'
})
export class LanguagesFilterPipe implements PipeTransform {

    transform(items: any[], arg: boolean): any {

        return items.filter(item => item.is_official == arg);
    }

}

还有我的模板

  <div>
           <dl class="EU-languages">
                <dd class="language EU-lang"
                                *ngFor="let language of (languages | languagesFilter:true)">
                                <input type="radio"
                                    id="{{language.code}}" />
                                <label htmlFor="{{language.code}}"> {{language.code | uppercase}}</label>
                            </dd>
                        </dl>
     </div>

当我不使用管道时，一切正常，我填充了所有数组对象并显示在模板中。当我使用管道时，我收到以下错误 => 由以下原因引起：无法读取未定义的属性“过滤器”。 我将数组更改为具有初始化数组的数组并且管道正常工作。 有什么建议吗？我错过了什么？

Answer 1

这是因为第一次调用管道时，还没有列表/数组..

像这样改变你的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'languagesFilter'
})
export class LanguagesFilterPipe implements PipeTransform {
    transform(items: any[], arg: boolean): any {
        if (!items || !items.length) return [];
        return items.filter(item => item && item.is_official == arg);
    }
}

你可以像这样启动你的局部变量：

languages: Language[] = [];

.. 但修改后的 Pipe 也应该有助于解决任何其他“错误”！