javascript - 迭代对象数组 Angular 2 组件

Question

任何人都可以帮助我做错什么，缺少什么吗？ 我的 --'this.ack.length' 未定义

this._activeChannelService.requestChannelChange(this.selectedchannel.channelName)
        .subscribe(
            ack  => {
                this.ack= ack;
                console.log(" test:  ", this.ack.length);
            },
            err => {
            console.log(err);
        });enter code here

确认时间到了 ack:Iack[];

Iack 有两个字符串类型的字段。结果和消息 我需要迭代 Iack[] 数组来获取结果和消息 如果消息=成功则调用另一个服务

服务

requestChannelChange (name: string): Observable<Iack[]> {
    alert('in servicerequestChannelChange');
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    let postchannelname = "channelName=" + name;
    let requestt = new IRequest(name);
    console.log(JSON.stringify(requestt));
    return this._http.post(this._activateChangeUrl, JSON.stringify(requestt),{ headers: headers })
     //.map(this.extractData)
        .map((res:Response) => res.json() as Iack[])
        .do(data => console.log("All: " + JSON.stringify(data)))
     .catch(this.handleError);
}

Answer 1

您可以在 TS 服务中使用 observable:

import { Injectable } from '@angular/core';
import { IPost } from './IPost';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';


@Injectable()
export class PostServices {

    private _webApiBaseUrl = "http://localhost:62806/v1/Posts"
    private _http : Http;

    constructor(http : Http){
        this._http = http;
    }   

    getAll(): Observable<IPost[]> {
        return this._http.get(this._webApiBaseUrl + '/all', this.getHeaders())
        .map((response: Response) => response.json())
        .do(data => console.log(`All Data: \n ${ JSON.stringify(data) }`))
        .catch(this.handleError);
    }   

    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || 'Server Error');
    }    

    private getHeaders()
    {
        let headers = new Headers();
        headers.append("Authorization", ""); 
        headers.append("Content-Type", "application/json");
        return new RequestOptions({ headers: headers });
    }

}

在 TS 类中的用法:

import { Component, OnInit } from '@angular/core';
import { IPost } from './IPost';
import { PostServices } from './posts.service';

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

  posts: IPost[];
  errorMessage: string;

  private _postService: PostServices;
  constructor(postService: PostServices) {
    this._postService = postService;
  }


  ngOnInit() {
    this._postService.getAll()
      .subscribe(
      data => {this.posts = data; console.log("data.length: " + data.length)}, // here
      error => this.errorMessage = <any>error 
      );

  }

}