Angular 2 : How to display console response data?

Question

我无法显示控制台响应数据。我不知道我的代码哪里出了问题。我已经提供了。将感谢您的帮助。

控制台响应

account.service.ts

import { Injectable }    from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable }    from 'rxjs/Rx';
import { Account } from './account';
import { environment } from '../../../environments/environment';
import { UrlConstant } from '../../shared/constant/url-constant';

@Injectable()
export class AccountService {
 constructor(private http: Http) {
 }
 private headers = new Headers({ 'Content-Type': 'application/json' 
  });
 private authApiUri = environment['BP_AUTH_SERVER_URI'];
 listAccount(authToken: string): Observable<Account[]> {
   this.headers.set('Authorization', authToken);
   console.log(authToken, ')))))))))))))))))');
   returnthis.http.get(`${this.authApiUri}/${UrlConstant.ACCOUNT_LIST.replace('id' , '5682682637844480')}`, { headers: this.headers })
  .map(response => {
    console.log(response, 'LLLLLLLLLLLLLLL')
    let accounts: Account[] = [];
    response.json().accountList.forEach((accountResponse) => {
      let account = new Account(accountResponse.name , accountResponse.primaryEmailAddress, accountResponse.displayName);
      account.kazooAccountId = accountResponse.account_kazooAccountId;
      accounts.push(account);
    });
    return accounts;
  })
  .catch(this.handleError);
}
 private handleError(error: Response | any): Observable<any> {
   return Observable.throw(error.json());
 }
}

account.ts

export class Account {
name: string;
kazooAccountId: string;
primaryEmailAddress: string;
displayName: string;

  constructor(name: string, primaryEmailAddress: string, displayName: string) {
    this.name = name;
    this.primaryEmailAddress= primaryEmailAddress;
    this.displayName = displayName;
   }
  }

account-routing.ts

import { Routes } from '@angular/router';
import { UrlConstant } from '../../shared/constant/url-constant';
import { AccountListingComponent } from './account-listing/account-listing.component';

export const accountRoutes : Routes = [
  {
    path : UrlConstant.ACCOUNT_LISTING,
    component : AccountListingComponent
  }
];

  export  const accountRoutingComponent = [ AccountListingComponent ];

account-listing/account-listing.html

<p>
  account-listing works!
</p>
<ul>
   <li *ngFor="let account of accounts">
     {{account.name}}
     {{account.kazooAccountId}}
     {{account.displayName}}
   </li>
</ul>

account-listing/account-listing.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { CookieService } from 'angular2-cookie/services/cookies.service';

import { AppConstant } from '../../../shared/constant/app-constant';
import { Account } from '../account';
import { AccountService } from '../account.service';

@Component({
  selector: 'app-account-listing',
  templateUrl: './account-listing.component.html',
  styleUrls: ['./account-listing.component.css'],
  providers: [CookieService, AccountService]
})
export class AccountListingComponent implements OnInit {
  accounts: Account[];
  constructor(private accountService: AccountService, private router: Router, private cookieService: CookieService) {
 }

 ngOnInit() {
   this.listAccount();
 }

  listAccount() {
    const authToken: string = 
   this.cookieService.get(AppConstant.AUTH_TOKEN_COOKIE);
this.accountService.listAccount(authToken)
  .subscribe((accounts) => {
    console.log(accounts, 'KKKKKKKKKKKKKKKKKKKK')
    this.accounts = accounts;
  })
 }
}

Answer 1

不知道您的期望是什么，因为您可以看到响应与 accounts 不匹配。您的回复实际上与此类似:

{"id":"1","emailsFor":"emailsFor","name":"shree org one","offers":false}

其次，如果这与您的帐户匹配，则无需使用 forEach 迭代响应，您只需 .map(res => res.json()).

您的服务:

return this.http.get(...)
  .map(res => res.json())

然后在您的组件中，将该数据分配给一个变量，这里我只使用了data:

data: Object = {};

this.accountService.listAccount(authToken)
  .subscribe(data => {
    this.data = data;
  });

然后您可以显示响应的内容，例如:

{{data?.id}} {{data?.emailsFor}} {{data?.name}}

这是显示响应数据的方法。不过，您的问题表明您正在寻找一种与您的帐户相匹配的不同类型的回复。为此，您必须弄清楚如何获得所需的响应。