angular - 管道Angular2中的同步错误数据

Question

在angular2中的管道内使用服务时出现同步错误，显然在信息从后端到达之前执行管道的“转换”方法

我的代码，file.pipe.ts

import {Inject} from '@angular/core';
import {Pipe, PipeTransform} from '@angular/core';
import {MerchantService} from './../services/merchant.service';

@Pipe({
    name: 'whoMerchant'
})
export class WhoMerchantPipe implements PipeTransform {

    private listMerchant = [];
    constructor(@Inject(MerchantService) private merchantServices) {
        this.merchantServices
            .getMerchant()
            .subscribe(
                listMerchant => {
                    console.log(listMerchant.data);
                    this.listMerchant = listMerchant.data;
                },
                error => console.log(error)
            )
    }
    transform(id:any, args?:any) {
        if (id && !isNaN(id))
            return this.filterMerchant(this.listMerchant, id);

        return "Merchant no identificado";
    }

    private filterMerchant(list, id):string {
        console.log(list);
        for (let i of list) {
            if (i.id == id)
                return i.name;
        }
        return "Merchant no identificado"
    }
}

文件.service.ts

import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {config_server} from './../config/config';
import {Observable} from 'rxjs/observable';

@Injectable()
export class MerchantService {

    constructor(private http:Http) {
    }

    getMerchant():Observable<any> {
        console.log(config_server.headers);
        return this.http
            .get(config_server.svr + "merchants", {headers: config_server.headers})
            .map(this.extraData)
            .catch(this.handleError);
    }

    private extraData(res: Response) {
    return {
        headers: res.headers,
        data: res.json()
    };
}
    private handleError(error) {
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg);
    return Observable.throw(errMsg);
}

}

<section class="card">
    <div class="card-header bgm-blue"> <!-- Please refer the Colors page in User Interface for more color classes -->
        <h2 class="text-center">{{ 'white-list' | translate | uppercase}}</h2>
    </div>
    <div class="row card-body card-padding">
        <div role="tabpanel">
            <ul class="tab-nav" role="tablist">
                <!--Primer titulo de tab-->
                <li class="active col-xs-6 text-center">
                    <a href="#activo1" aria-controls="activo1" role="tab"
                       data-toggle="tab">
                        Activos
                    </a>
                </li>
                <!--Segundo titulo de tab-->
                <li class="col-xs-6 text-center">
                    <a href="#inactivo2" aria-controls="inactivo2" role="tab"
                       data-toggle="tab">
                        Inactivos
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <!--Primer tab contenido-->
                <div role="tabpanel" class="tab-pane active container" id="activo1">

                    <div class="table-responsive ">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Merchant</th>
                                <th>Email Domain</th>
                                <th>Costumber Id</th>
                                <th colspan="3"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let i of whitelist" class="view-btn">
                                <td>{{i.id}}</td>
                                <td>{{i.merchantId | whoMerchant }}</td>
                                <td>{{i.emailDomain | noData}}</td>
                                <td>{{i.merchantCustomerId | noData}}</td>
                                <td>
                                    <i class="material-icons icon-select" title="Editar Merchant">edit</i>
                                </td>
                                <td>
                                    <i class="material-icons icon-select" title="Eliminar Merchant">delete</i>
                                </td>
                                <td>
                                    <i class="material-icons icon-select"
                                       title="Informacion a detalle del Merchant"
                                       [routerLink]="['info', i.merchantId]">info</i>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--Segundo tab contenido-->
                <div role="tabpanel" class="tab-pane" id="inactivo2">
                </div>
            </div>
        </div>
    </div>
</section>

预先非常感谢

Answer 1

您可以使用异步管道从服务中获取结果，然后您可以使用管道过滤结果。