HTTPClient角

Question

我是angular6的新手，我以前做过很多安卓项目的工作，我还安装了Spring和Hibernate。在安卓的截击中工作得很好。

现在，我发现很难从RestAPI中提取数据，所以RestAPI数据是：

collection  {
  version   : "1.0"
  error : null
  **data    : {
      id    : 1
      name  : "Test"
      password  : "MTIzNDU="
      createdDate : null
      email : "s.puspharaj@gmail.com"
      userArea  : "coimbatore"
      fcmTokenId    : ""
      mobileNo  : 4545456456
      googleAuth    : "yes"
      appVersionCode    : null
      }**
      statusCode    : 200
      booleanStatus : null }

如何在Angular6中提取上述收集数据？我不知道如何像android中那样在angular中进行调试。如何将其保存在用户模型中的角度？

用户模型类：

export class User {
id: number;
name: String;
createdDate: Date;
email: String;
userArea: String;
fcmTokenId: String;
mobileNo: String;
googleAuth: String;
appVersionCode: String;
modifyDate: String;
serverTime: String;

get getid() {
    return this.id;
}

set setid(id: number) {
    this.id = id;
}

get getName() {
    return this.name;
}

set setName(name: String) {
    this.name = name;
}

收藏模式：

export class Collection {
public version: String;
public data: Object;
public error: CollectionError;
public statusCode: number;
public booleanStatus: boolean;

get getError() {
    return this.error;
}

/**
 * @param error the error to set
 */
set setError(error: CollectionError) {
    this.error = error;
}

/**
 * @return the version
 */
get getVersion() {
    return this.version;
}

/**
 * @param version the version to set
 */
set setVersion(version: String) {
    this.version = version;
}

/**
 * @return the data
 */
get getData() {
    return this.data;
}

/**
 * @param data the data to set
 */
set setData(data: Object) {
    this.data = data;
}

get getStatusCode() {
    return this.statusCode;
}

set setStatusCode(statusCode: number) {
    this.statusCode = statusCode;
}

get isBooleanStatus() {
    return this.booleanStatus;
}

set setBooleanStatus(booleanStatus: boolean) {
    this.booleanStatus = booleanStatus;
}

}

到目前为止，我尝试的HTTP客户端是：

 constructor(private http: HttpClient) { }

 getUser(): Observable<Collection> {
   return this.http.get<Collection>('http://localhost:8080/tooveWeb/v1/user/1');
}

onClickLogin() {
this.data.getUser().subscribe((collection) => this.collection.user = 
collection.user);
console.log(this.collection);

}

如何提取数据并将其存储到建模类并显示为html？

请给我建议！

谢谢

Answer 1

在subscription to getuser()方法中，可以将响应数据分配给Collection类的user属性。

private collection : Collection = new Collection() // method 1

或

在组件中注入Collection类

constructor(private collection : Collection) { }  // method 2

this.getUser.subscribe((coll)=> {      
     this.collection.user= coll.data
})

Answer 2

如何将其保存在用户模型中的角度？

当您调用getUser时，您需要订阅。在订阅中，您可以对用户模型的响应值进行分拆。

private collection : Collection;

this.getUser.subscribe((coll)=> {      
     this.collection.user= coll.data
})

如何在Angular6中提取上述收集数据？

可以使用this.collection.user访问用户对象。

我不知道如何像在android中那样进行角度的调试

可以使用debugger设置断点。并使用浏览器开发工具(右击->检查)。

或者您可以使用console.logs

请阅读此文章以获得更多信息

Answer 3

请记住，Http是异步的。这意味着使用此代码：

onClickLogin() {
  this.data.getUser().subscribe((collection) => this.collection.user = 
  collection.user);
  console.log(this.collection); //// <-- ALWAYS UNDEFINED!!
}

如果您想查看您的值，需要将日志记录移动到订阅中，如下所示：

onClickLogin() {
  this.data.getUser().subscribe((collection) => {
  this.collection.user = collection.user;
  console.log(this.collection); // <-- here instead
  });
}

接下来，如果您想在模板(html)中使用collection，可以使用async管道，检查这个答案