Angular 9使用REST API

Question

我刚接触Angular，我想把它用在我的前端。我在spring中有一个REST API，它给出了下面的Json内容，我的问题是我设法使用*ngFor来显示产品，但我想显示每个产品的类别。

我在互联网上查找，但它只解释了如何显示一个简单的实体，而不是href链接的值。谢谢你的帮忙

{
  "_embedded" : {
    "products" : [ {
      "id" : 4,
      "name" : "lKVOJRjKir",
      "description" : null,
      "currentPrice" : 405.0,
      "promotion" : true,
      "selected" : true,
      "available" : false,
      "photoName" : "unknown.jpeg",
      "quantity" : 1,
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/products/4"
        },
        "product" : {
          "href" : "http://localhost:8080/products/4"
        },
        "category" : {
          "href" : "http://localhost:8080/products/4/category"
        }
      }

这是我的服务：

 private getProducts(url) {
    this.catalogueService.getResource(url)
      .subscribe(data => {
        this.products = data;
      }, error => {
        console.log(error);
      })
  }

这是我的html文件，我已经尝试过了：

<div class="col-md-4" *ngFor="let p of products._embedded.products" >
     <div class="card" >
       <div class="card-header">{{p.name}}</div>
       <div>Price : {{p.currentPrice|number:'0.2'}}</div>
       <div>{{p.description}}</div>
       <div>Selected: {{p.selected}}</div>
       <div> Category: {{p.category.name}}</div>  // not working

Answer 1

上面的json对象中没有类别键。如果不是每个产品的json对象都返回。你可以在你的html中使用安全操作符。{{p?.category?.name}}

Answer 2

为了结束这个主题，我找到了一个解决方案，即使用以下命令公开类别字段：https://docs.spring.io/spring-data/rest/docs/3.1.x/reference/html/#projections-excerpts.excerpting-commonly-accessed-data