Question

我正在使用Angular 5进行Web UI。该Web UI在使用Java和Spring数据rest编写的后端服务中使用restful端点。这是端点，例如：

the definition of .connect()

{
  "_links" : {
    "accounts" : {
      "href" : "http://localhost:8080/accounts{?page,size,sort}",
      "templated" : true
    },
    "build-and-test-submissions" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "build-submissions" : {
      "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile"
    }
  }
}

build-and-test-submissions和build-submissions端点是此项目中的主要关注点。

http://localhost:8080/

    {
  "_embedded" : {
    "build-and-test-submissions" : [ {
      "changeListId" : "23967925",
      "postedAt" : null,
      "lastUpdatedAt" : null,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildAndTestSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1"
        },
        "buildSubmission" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/buildSubmission"
        },
        "account" : {
          "href" : "http://localhost:8080/build-and-test-submissions/1/account"
        }
      }
    },  ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/build-and-test-submissions{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/build-and-test-submissions"
    },
    "search" : {
      "href" : "http://localhost:8080/build-and-test-submissions/search"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 5,
    "totalPages" : 1,
    "number" : 0
  }
}

http://localhost:8080/build-and-test-submissions

   {
      "_embedded" : {
        "build-submissions" : [ {
          "nvBranchName" : "some_branch",
          "nvPackageName" : "some_package",
          "isBuildSubmitted" : false,
          "isBuildCompleted" : false,
          "isTestSubmitted" : false,
          "isTestCompleted" : false,
          "packageLocation" : "",
          "jobId" : -1,
          "_links" : {
            "self" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1"
            },
            "buildAndTestSubmission" : {
              "href" : "http://localhost:8080/build-submissions/1/buildAndTestSubmissionParent"
            }
          }
        }, ... ]
      },
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/build-submissions{?page,size,sort}",
          "templated" : true
        },
        "profile" : {
          "href" : "http://localhost:8080/profile/build-submissions"
        },
        "search" : {
          "href" : "http://localhost:8080/build-submissions/search"
        }
      },
      "page" : {
        "size" : 20,
        "totalElements" : 5,
        "totalPages" : 1,
        "number" : 0
      }
    }

构建与提交和构建与提交是1：1关系的飞船。我的问题是：

大多数角度教程都通过以下示例演示如何使用httpclient获取简单的非嵌套对象：

this.http.get('http://localhost:9000/build-and-test-submissions')
            .subscribe((response: any) => {
              let buildAndTests: any[] = response;



                this.products = response;
                this.onProductsChanged.next(this.products);
                resolve(response);
            }, reject);
    });

但是我如何获得具有关联关系的对象的http？例如。我应该嵌套一个http-的构建和测试提交对象以及一个构建提交对象吗？

Answer 1

首先，我要做一个console.log（buildAndTests）来查看结构

this.http.get('http://localhost:9000/build-and-test-submissions')
        .subscribe((response: any) => {
          let buildAndTests: any[] = response;

           console.log( buildAndTests );
           console.log( buildAndTests._links.self.href );


            this.products = response;
            this.onProductsChanged.next(this.products);
            resolve(response);
        }, reject);
});

然后您就可以开始尝试，直到获得所需的东西为止，例如，如果您进行评估

buildAndTests._links.self.href 应该返回“ http://localhost:8080/build-and-test-submissions/1”

如何在Angular中使用嵌套的Rest资源？

1 个答案: