Question

考虑AngularJS 2应用程序的这个简单片段：

的TestObject

export class TestObject {
     id: number;
     name: string;
}

TestService的

[...]

export class TestService {
    constructor(private http: Http) {}

    test(): Observable<TestObject> {
        return this.http
           .get("http://www.example.com")
           .map(this.save)
           .catch(this.fail);
    }

    private save(response: Response) {
        let testObject: TestObject = <TestObject> response.json();
        return testObject || {};
    }

    private fail(error: any) {
        return Observable.throw("error!");
    }
}

AppComponent

[...]

export class AppComponent implements OnInit {

    testObject: TestObject;

    constructor(private testService: testService) {}

    ngOnInit() {
        this.testService.test().subscribe(
            data => { 
                this.testObject = new TestObject();
                console.log(this.testObject); // prints (empty) TestObject
                this.testObject = data; 
                console.log(this.testObject); // prints object, not TestObject?
            },
            error => { }
        );
    }
}

我的问题在这里：

1）为什么我的应用程序打印出来（使用Chrome Inspector）object而非TestObject作为类型？

2）类testObject的属性AppComponent应为TestObject类型。为什么我的应用程序没有失败？

3）我怎样才能实现我真正得到的TestObject？最好的方法是什么？当然我可以手动填充我的TestObject，但我希望有一些方法可以自动将json映射到我的对象。

Answer 1

这是我写给一个问题的答案，该问题解释了angular2中observables的处理。

Angular 2 http post is returning 200 but no response is returned

在这里，您可以看到我如何处理服务返回的Response对象。从服务中的map函数返回响应对象非常重要。类似地，您可以通过强制转换响应对象将响应对象转换为typescript类型。例子可以是：

this._loginService.login(this.username, this.password)  
    .subscribe(
        (response) => {
            //Here you can map the response to a type.
            this.apiResult = <IUser>response.json();
            //You cannot log your object here. Here you can only map.
        },
        (err) => {
            //Here you can catch the error
        },
        () => {
          //this is fired after the api requeest is completed.
          //here you can log your object.
          console.log(this.apiResult);
          //result will only be shown here.
        }
    );

在这里，可以清楚地看到我正在将响应对象转换为IUser类型。

另一件事是在处理组件中的apiresponse时，需要注意的是subscribe函数有三个参数，如果你想记录你的对象，你必须在subscribe的最后一个函数中执行它。

希望这有帮助！

你的电话必须像

ngOnInit() {
    this.testService.test().subscribe(
        (data) => { 
            this.testObject = new TestObject();
            console.log(this.testObject); // prints (empty) TestObject
            //only mapping
            this.testObject = data; 
        },
        error => { },
        () => {
            console.log(this.testObject);
        }
    );
}

如何将JSON字符串映射到AngularJS 2中的TypeScript（JavaScript）对象？

1 个答案: