Question

我的组件类：

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { I4PService } from '../shared/i4pservice.model';
import { I4PServiceService } from '../shared/i4pservice.service';

@Component({
  moduleId: module.id,
  selector: 'i4pservice-list',
  templateUrl: './i4pservice-list.component.html',
  styleUrls: ['./i4pservice-list.component.css']
})

export class I4PServiceListComponent implements OnInit {
  i4pservices: I4PService[];
  selectedService: I4PService;

  constructor(
    private i4pserviceService: I4PServiceService,
    private router: Router) {
    console.log('in the I4PServiceListComponent constructor....');
  }

  getI4PServices(): void {
      console.log('I4PServiceListComponent:getI4PServices()....');
      if (this.i4pserviceService) {
        console.log('Does the i4pserviceService exist? yes ');
      }

      console.log("what's returned from the service class? " + this.i4pserviceService.getI4PServices());

      this.i4pserviceService.getI4PServices()
        .then(i4pservices => {
          console.log('i4pservices: ' + i4pservices);
          this.i4pservices = i4pservices;
          console.log('this.i4pservices: ' + this.i4pservices);
        });

      if (this.i4pservices) {
        console.log('i4pservices fetched? yes ');
      }
    }
    ...
}

＆＃13;

这里是相应的服务类：

＆＃13;

import { Injectable }    from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { I4PService } from './i4pservice.model';

@Injectable()
export class I4PServiceService {
    private headers = new Headers({'Content-Type': 'application/json'});
    private i4pservicesUrl = '/rest/servicecatalog/services'; // URL to web api
    
    constructor(private http: Http){}
    
    getI4PServices():Promise<I4PService[]>{
          console.log('in the getI4PServices method....');
        return this.http.get(this.i4pservicesUrl)
                   .toPromise()
                   .then(response => {
                       console.log('in the getI4PServices method....');
                       console.log(response);
                       console.log('response data I4PService: ' + response.json());
                       response.json() as I4PService[];                  
                   })
                   .catch(this.handleError);
     }
     ...
 }

＆＃13;

控制台输出如下所示：

＆＃13;

core.umd.js:111 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
i4pservice-list.component.ts:20 in the I4PServiceListComponent constructor....
i4pservice-list.component.ts:24 I4PServiceListComponent:getI4PServices()....
i4pservice-list.component.ts:26 Does the i4pserviceService exist? yes 
i4pservice.service.ts:17 in the getI4PServices method....
i4pservice-list.component.ts:29 what's returned from the service class? [object Object]
i4pservice.service.ts:17 in the getI4PServices method....
i4pservice.service.ts:21 in the getI4PServices method....
i4pservice.service.ts:22 Response {_body: "[{"name":"xxx","id":"xxxx","tags":["xxx"],...}]", status: 200, ok: true, statusText: "OK", headers: Headers…}
i4pservice.service.ts:23 response data I4PService: [object Object],[object Object],[object Object],[object Object],[object Object]
i4pservice.service.ts:21 in the getI4PServices method....
i4pservice.service.ts:22 Response {_body: "[{"name":"xxx","id":"xxxx","tags":["xxx"],...}]", status: 200, ok: true, statusText: "OK", headers: Headers…}
i4pservice.service.ts:23 response data I4PService: [object Object],[object Object],[object Object],[object Object],[object Object]
i4pservice-list.component.ts:33 i4pservices: undefined
i4pservice-list.component.ts:35 this.i4pservices: undefined

＆＃13;

只是不明白日志中的最后两行：为什么数据＆＃39; i4pservices＆＃39;未定义？（为什么不通过调用服务类中的方法来获取它？我该怎么解决这个问题？非常感谢提前！（我使用的是Anguar 2.4.1，相关库都是最新版本。）

Answer 1

您没有从承诺中的response.json() as I4PService[];方法返回任何值。

将退货声明添加到getI4PServices():Promise<I4PService[]>{ console.log('in the getI4PServices method....'); return this.http.get(this.i4pservicesUrl) .toPromise() .then(response => { console.log('in the getI4PServices method....'); console.log(response); console.log('response data I4PService: ' + response.json()); return response.json() as I4PService[]; }) .catch(this.handleError); } ... }

＆＃13;

#standardSQL
SELECT * REPLACE (REPLACE(fieldWithIssue, '"', "'") AS fieldWithIssue)
FROM yourTable

＆＃13;

组件类在调用基于Promise的服务方法

1 个答案: