javascript - Angular 2 和原生 Promise

Question

我在使用带有第二个 Angular 和 typescript 的 native promise 时遇到问题:

export class LoginComponent implements OnInit {

    public user = {};

    constructor( private authService:AuthenticationService) { }

    ngOnInit() {
    }

    login() {

        console.log( 'Connecting to server' );

        this.authService.login( this.user ).then(( response ) => {

            // works
            console.log( response['success'] );

            // error
            console.log( response.success ); 

        }, ( error ) => {

            console.log( error );
        });
    }
}

下面是简单的服务，与服务器的假连接:

export class AuthenticationService {

    // ... some code ...

    login( loginData ) {

        let self = this;

        return new Promise(function(resolve, reject){

            // fake delay - for now is no back end
            setTimeout(function() {

                if ( loginData.username === 'username' && loginData.password === 'password' ) {

                    resolve({
                        message: "Successfully logged in",
                        success: true,
                        errors: null
                    });
                } else {

                    reject({
                        message: "Wrong user data reperesented",
                        success: false,
                        errors: {
                            "username": true,
                            "password": true
                        }
                    });
                }
            }, 100);
        });
    }

    // ... some code ...
}

尝试搜索我必须采取的措施来解决类型“{}”上不存在属性“成功”。错误，但没有成功。

Answer 1

发生这种情况是因为上面的代码没有输入。

为了使这项工作正常进行，它应该是

login( loginData ): Promise<any> { ... }

或

this.authService.login( this.user ).then(( response: any ) => { ... })

更好的方法是让类型为您工作，而不是忽略它们:

interface IAuthLoginResponse {
    message: string;
    success: boolean;
    errors: any;
}

...

login( loginData ): Promise<IAuthLoginResponse> {
  return new Promise<IAuthLoginResponse>(function (resolve, reject) { ... })
}