Question

我有一个名为'customer.component.ts'的组件。在该组件的视图中，有一个名为“搜索”的按钮。我正在做的是在这个“搜索”按钮上调用一个web api方法，它会从sql db中获取数据。

为此，我有一个 customer.service.ts 文件，其中我写了下面的代码 -

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import "rxjs/add/operator/map";
import 'rxjs/add/operator/toPromise'; 
import { Customer, CustomerContact, CustomerHeaderAndContactsResponse, CustomerSearchRequestObjectClass, CustomerHeaderAndContactsResponse_Read } from '../models/customer';

@Injectable()
export class CustomerService {
    constructor(private _http: Http) {

    }

    baseUrl: string = 'http://localhost/SampleApi/api/Customer/';

searchCustomers(custReqObj: CustomerSearchRequestObjectClass): observable<CustomerHeaderAndContactsResponse_Read> {        
                    let headers = new Headers();
                    headers.append('Content-Type', 'application/json; charset=utf-8');
                    return this._http.post((this.baseUrl + 'search-customer'), JSON.stringify(custReqObj), { headers: headers }).map(res => res.json());
                }
}

我的 customer.component.ts 有搜索点击功能 -

import { Component, OnInit } from '@angular/core';
import { strictEqual } from 'assert';
import { ChangeDetectorRef } from '@angular/core';
import { stringify } from '@angular/core/src/facade/lang';
import { Customer, CustomerContact, CustomerHeaderAndContactsResponse_Read } from '../models/customer';
import { Observable } from 'rxjs/Observable';  
import { CustomerService } from '../services/customer.service';
import { ChangeDetectionStrategy } from '@angular/core/src/change_detection/constants';
import { forEach } from '@angular/router/src/utils/collection';
import { AsyncPipe } from '@angular/common';
import { error } from 'util';
import { parse } from 'path';
import { Subscriber } from 'rxjs/Subscriber';

declare var $: any;

@Component({
    selector: 'customer',
    templateUrl: 'app/customer/views/customer.component.html',
})
export class CustomerComponent implements OnInit {
    constructor(private changeDetectorRef: ChangeDetectorRef, private _custSvc: CustomerService) {      
    }

    ngOnInit() {}



customerSearch: CustomerHeaderAndContactsResponse_Read = new CustomerHeaderAndContactsResponse_Read();

 onCustomerSearchClick(): void {

        this._custSvc.searchCustomers(this.custSearchReqObj).subscribe(
            data => {
                this.customerSearch = data;     
            },
            err => console.log(err, 'error has occurred'),
            () => console.log(this.customerSearch)
        );
console.log(this.customerSearch);
 }

以下是我的模特课 -

export class CustomerHeaderAndContactsResponse_Read
{
    custHeader:Customer[];
    custContact:CustomerContact[];
}

Customer和CustomerContact类都包含一些属性。

最后这是我的模板，我试图遍历对象，表行只是不显示任何数据。我也使用了异步（AsyncPipe），但没有多大帮助。

<tr *ngFor="let custItem of customerSearch.custHeader | async; let rowIndex = index">
                                    <td>
                                        <a (click)="onCustomerItemDetailsClick(custItem.acCustomerName, rowIndex)" class="btn">{{custItem.acCustomerName}}</a>
                                    </td>
                                    <td>{{custItem.acCountryId}}</td>
                                    <td>{{custItem.acAreaId}}</td>
                                    <td>{{custItem.acTel}}</td>
                                    <td>{{custItem.acFax}}</td>
                                    <td>{{custItem.acSalesContact}}</td>
                                    <td>
                                        <a (click)="onCustomerContactItemDeleteClick(rowIndex, 'manage-customer')" class="btn" id="btnIconDelete">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </a>
                                    </td>
                                </tr>

请帮忙，因为我无法理解错误的原因/地点。如果需要更多信息，请告诉我。

提前致谢！ nitinthombre1991@gmail.com

编辑 -

尝试使用BehaviorSubject方法，但现在得到如下的错误 -

Observable error

Answer 1

异步管道用于将observable直接绑定到模板。所以这就是你能做的：

data$: Observable<CustomerHeaderAndContactsResponse_Read>;
search$ = new BehaviourSubject<boolean>(true);

ngOnInit() {
  this.data$ = this.search$.switchMap(searchObj => this._custSvc.search...(...));
}

onCustomerSearchClick() {
  this.search$.next(true);
}

模板看起来像这样

<tr *ngFor="let item of data$ | async>...</tr>

所以现在每次点击你的搜索，它都会发送一个调用服务，而异步管道正在处理模板中的数据显示

如何从Observable捕获和显示数据？

1 个答案: