Question

我有一个带有rest api用作后端的spring boot应用程序。我想使用angularjs作为前端。

我从api得到这样的响应

{
  "_embedded" : {
    "genders" : [ {
      "name" : "male",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/genders/1"
        },
        "gender" : {
          "href" : "http://localhost:8080/api/genders/1"
        }
      }
    }, {
      "name" : "female",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/api/genders/2"
        },
        "gender" : {
          "href" : "http://localhost:8080/api/genders/2"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/api/genders{?page,size,sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/api/profile/genders"
    }
  },
  "page" : {
    "size" : 20,
    "totalElements" : 2,
    "totalPages" : 1,
    "number" : 0
  }
}

角部分：

这是我的性别。

export class GenderService {

  private gendersUrl = 'http://localhost:8080/api/genders';


  constructor(
    private http: HttpClient,
  ) {}

  getGenders(): Observable<Gender[]> {
    return this.http.get<Gender[]>(this.gendersUrl);
  }
}

我的性别模型（我需要吗？）

export class Gender{
    name: string;
}

我的组件

export class TestComponent implements OnInit {

  genders: Gender[];

  constructor(private genderService: GenderService) { }

  ngOnInit() {
    this.getGenders();
  }

  getGenders(): void {
    this.genderService.getGenders()
    .subscribe(genders => this.genders = genders);
  }

}

以及我的使用方式

<ul class="genders">
  <li *ngFor="let gender of genders">
    {{gender.name}}
  </li>
</ul>

响应不是数组，出现以下错误

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我应该在我的sex.service中使用map来解决这个问题还是我做错了什么？

Answer 1

问题在于，API返回的JSON无法解析为数组。我设法解决了这一问题，方法是先将可观察对象解压缩到一个对象中，然后在该对象的内部数组中循环。

<ul class="genders" *ngIf="genders | async as queerJsonObject">
  <li *ngFor="let gender of queerJsonObject._embedded.genders">
    {{gender.name}}
  </li>
</ul>

在服务内部进行此转换可能会更优雅。如果您知道如何做，请随时分享。

带有角度的手柄静止响应（HATEOAS）

1 个答案: