Question

我是这个打字稿世界和Angular2的菜鸟，所以这个问题可能会引起有趣的反应。

在我的应用中，我需要从WS REST中检索数据，数据采用Json格式。

data:                     Object
  outCurpacatens:         [1]
      0:                  Object
            agenda:       877
            codestado:    1
            correlativo:  1
            estado:       "RESERVADO"
            idreserva:    18142568
            idservicio:   2
            idsucursal:   2
            materno:      "MAT6398674"
            nombre:       "FELIPE ALEJANDRO"
            obs:          null
  mensaje:                null

我的界面看起来像：

export interface Agenda {
   agenda: number;
   codestado: number;
   correlativo: number;
   estado: String;
   idreserva: number;
   idservicio: number;
   idsucursal: number;
   materno: String;
   nombre: String;
   obs: String;
}

agenda.components.ts

export class AgendaComponent implements OnInit {

 public localState: any;
 public es: any;
 public res: any;
 public jsonData: any;

 constructor(public route: ActivatedRoute, private auth: Auth, private agendService: AgendaService) {
 }   

  public ngOnInit() {
 }

 testPatch(){
   this.res = this.agendService.getAgendaByDate('12')
              .subscribe(data => {
                                    this.jsonData = data;
                                  }
      );
 }

}

agendaService.ts

@Injectable()
export class AgendaService {

    private baseUrl = 'https://myweb';
    private serviceUrl = '/agenda/getmethod';
    private headers: Headers;

    constructor(private http:Http, private authService: Auth){
    }

    private getOptions(): RequestOptions {
        let headers: Headers = new Headers();
        let token = localStorage.getItem('id_token');
        headers.append('content-type', 'application/json; charset=utf-8');
        headers.append('Authorization', 'Bearer '+ token);
        let opts = new RequestOptions({headers: headers});
        opts.headers = headers;
        return opts;
    }

    getAgendaByDate(fecha:string): Observable<Agenda> {
         /** input parameters setted with cons until resolve issue **/
         return this.http.get(`${this.baseUrl}${this.serviceUrl}?id=877&fecha=23082017`)
        .map((res: Response) => {
                                    res.json();
                                }, this.getOptions());
    }

}

在编译中我收到此错误：

agenda / agenda.component.ts（52,59）：“议程”类型中不存在“outCurpacatens”属性。

我知道有些东西我不知道，但我不知道是什么。

编辑更新：

现在我说了这个：

agendaService.ts

 getAgendaByDate() {
    return this.http.get(`${this.baseUrl}${this.serviceUrl}?id=877&fecha=23082017`)
    .map((res: Response) => {return res.json().data.outCurpacatens[0]}).catch(this.handleError);
}


handleError(error) {
    console.error(error);
    console.log("Error: "+error);
    return Observable.throw(error.json().error || 'Server error');
}

我在控制台中得到了这个：

控制台

Object { _body: error, status: 0, ok: false, statusText: "", headers: Object, type: 3, url: null }  main.bundle.js:161:9
Error: Response with status: 0  for URL: null

问候。

Answer 1

您在映射中缺少return，它应如下所示：

.map((res: Response) => { return res.json() }

完成此操作后，您可能希望在响应中提取对应Agenda的数组中的对象。这将意味着数组outCurpacatens中的第一个（也是唯一的）对象，因此如何获取该对象将是：

.map((res: Response) => { return res.json().data.outCurpacatens[0]})

此外，由于您有一个接口，请使用它并将变量声明为类型。我假设它是jsonData，所以改为声明：

jsonData: Agenda = <Agenda>{};

完成此操作后，您可能需要使用安全导航操作符来保护空值，例如：

{{jsonData?.myProperty}}

或将模板包装在*ngIf="jsonData"

中

希望这有帮助！：）

更新：确保从某个地方拨打testPatch。这是一个

Demo

testPatch中调用ngOnInit的地方。如果您正确接收数据，代码应该有效。

Angular 2接口 - Noob alert

1 个答案:

Demo