Angular2 map - > subscribe数据类型错误（类型'ErrorObservable'上不存在属性'length'。）

Question

I have difficulties in web programming.

I want to use HTTP communication, call 'map' and pass the array data.

makeTables(json:string) {
     let arr:Array<any> = [];
     ...

     return arr;
}

query(spName: string, objParam: Array<any>) {
     return this.http.post(this.url, this.data)
            .map(x => this.makeTables(x.json()));
};

login(username: string, password: string) {
      let ret = this.mysql.query("sp_admin_login", [username, password]);

      ret.subscribe( x => {
           // ERROR !!!!!!!!!
           console.log(x.length);

           if(1 ==1 /*user && user.token*/) {
                 localStorage.setItem("user", "user");
           } else {
           // Q2
                 // ret.mockError(new Error('Username or password is incorrect'));
           }
      });

         return ret;
    }

// ERROR !!!!!!!!

The error appears on accessing x.length

Error Message is

/admin/src/app/_authentication/authentication.service.ts (17,27):

Property 'length' does not exist on type 'any[] | ErrorObservable'.
Property 'length' does not exist on type 'ErrorObservable'.

---

And a second question:

How can I call the error method ? ( // Q2 )

ret.mockError(new Error('Username or password is incorrect'));

Answer 1

If you don not mention data type in your callbacks, by default your editor will refer to the return type of the calling method. So query() method can either return Array<any> or can throw error which is of type ErrorObservable . If you want to check the length in success call back then you should mention the type specifically. ret.subscribe((x : Array<any>) => {});

login(username: string, password: string) {
      let ret = this.mysql.query("sp_admin_login", [username, password]);

      ret.subscribe((x : Array<any>) => {
           // x is a known array now
           console.log(x.length);


           if(1 ==1 /*user && user.token*/) {
                 localStorage.setItem("user", "user");

           } else {
           // Q2
               this.mockError(new Error('Username or password is incorrect'));
           }
      });

         return ret;
    }

Coming to error handling, assuming you already have a error method. This is not a angular error but its an authentication error since you are calling it when login is not successful. Not appropriate to use method like this for handling error cases in applications. But still this can be helpful for handling angular errors.

mockError(error){
  if(error instanceof Error){
    // log error here
    console.log(error);
  }
}