首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >角2接口- Noob警报

角2接口- Noob警报
EN

Stack Overflow用户
提问于 2017-04-24 18:07:32
回答 1查看 190关注 0票数 1

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

在我的应用程序中,我需要从WS REST检索数据,数据以Json格式提供。

代码语言:javascript
复制
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

我的界面看起来是:

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
@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());
    }

}

在编译过程中,我得到了以下错误:

议程/议程.组件. on (52,59):属性'outCurpacatens‘在’Agenda‘类型中不存在.

我知道我错过了什么,但我不知道是什么。

编辑更新:

现在我说:

agendaService.ts

代码语言:javascript
复制
 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');
}

我在控制台上看到了这个:

控制台

代码语言:javascript
复制
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 

致以问候。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-24 20:44:11

您在映射中缺少了一个return,应该如下所示:

代码语言:javascript
复制
.map((res: Response) => { return res.json() }

一旦完成,您可能希望在响应中提取对应于Agenda的数组中的对象。这意味着数组outCurpacatens中的第一个对象(也是唯一的)对象,因此如何获取该对象的方法如下:

代码语言:javascript
复制
.map((res: Response) => { return res.json().data.outCurpacatens[0]})

另外,由于您有一个接口,所以使用它并将变量声明为类型。我假设这将是jsonData,所以应该声明它:

代码语言:javascript
复制
jsonData: Agenda = <Agenda>{};

一旦完成,您可能需要使用安全导航操作符来保护空值,如下所示:

代码语言:javascript
复制
{{jsonData?.myProperty}}

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

希望这会有帮助!)

更新:确保您正在从某个地方调用testPatch。这里有一个

演示

其中testPatchngOnInit中被调用。如果您正在正确地接收数据,则代码应该可以工作。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43594948

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档