將 JSon 轉換為 Angular TypeScript 對象

Question

我自己正在學習 Angular 的美妙世界，但我目前遇到了一個問題：我想制作一個網站，為此我使用了 back spring 和 front Angular 7。

我有一個問題。

我目前有 3 個實體：Builder、Category 和 Ship。

我的船當然有建造者屬性（船的建造者）和類別屬性（獵人...）。

在請求我的服務后。 (Vaisseau.service.ts)

public host = 'http://localhost:8080';

  constructor(private httpClient: HttpClient) {
  }

  public getVaisseaux(page: number, size: number) {
    return this.httpClient.get(this.host + '/vaisseaus?page=' + page + '&size=' + size);
  } 

他返回 JSon ：

{
  "_embedded" : {
    "vaisseaus" : [ {
      "nom" : "nomVaisseau",
      "description" : "Description du vaisseau",
      "image" : "http://127.0.0.1/img/Vaisseaux/2.jpg",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },
        "vaisseau" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },
        "constructeur" : {
          "href" : "http://localhost:8080/vaisseaus/2/constructeur"
        },
        "categorie" : {
          "href" : "http://localhost:8080/vaisseaus/2/categorie"
        },
        "utilisateurs" : {
          "href" : "http://localhost:8080/vaisseaus/2/utilisateurs"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/vaisseaus{&sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/vaisseaus"
    },
    "search" : {
      "href" : "http://localhost:8080/vaisseaus/search"
    }
  },
  "page" : {
    "size" : 5,
    "totalElements" : 1,
    "totalPages" : 1,
    "number" : 0
  }
}

我稱之為：

public constructeurs: any;
  public pages: Array<number>;
  private currentPage = 0;
  private size = 2;
  private totalPages: number;
  private currentKeyword = '';

  constructor(private constService: ConstructeurService, private router: Router) {
  }

  ngOnInit() {
    this.onGetConstructeurs();
  }

  onGetConstructeurs() {
    this.constService.getConstructeurs(this.currentPage, this.size)
      .subscribe(data => {
        this.constructeurs = data;
        this.totalPages = data['page'].totalPages;
        this.pages = new Array<number>(this.totalPages);
      }, err => {
        console.log(err);
      });
  }

在我的模板中：

<table *ngIf="vaisseaux" class="table">
        <!-- Si il n'y a pas de vaisseaux en BDD n'affiche pas le tableau-->
        <thead class="thead-dark">
        <tr>
          <th scope="col">Vaisseau</th>
          <th scope="col">Nom</th>
          <th scope="col">Constructeur</th>
          <th scope="col">Catégorie</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let p of vaisseaux._embedded.vaisseaus">
          <td class="col-md-2 align-middle"><img src="{{p.image}}"></td><!-- {{p.image}} -->
          <td class="col-md-2 align-middle text-center">{{p.nom}}</td>
          <td class="col-md-2">{{p.constructeur.nom}}</td>
          <td class="col-md-2">{{p.categorie.nom}}</td>
          <td class="col-md-2 align-middle  text-center">
            <a (click)="voirVaisseau(p)" class="btn btn-primary"><i aria-hidden="true"
                                                                    class="fa fa-plus-circle"></i></a>
            <a (click)="onEditVaisseau(p)" class="btn btn-warning m-2">Modifier</a>
            <a (click)="onDeleteVaisseau(p)" class="btn btn-danger">Supprimer</a></td>
        </tr>
        </tbody>
      </table>

並出現以下錯誤：

ERROR TypeError: "_v.context.$implicit.constructeur is undefined"
    View_LstVaisseauComponent_3 LstVaisseauComponent.html:35
    Angular 29
    RxJS 5
    Angular 9
LstVaisseauComponent.html:34:56
    View_LstVaisseauComponent_3 LstVaisseauComponent.html:34
    Angular 15
    RxJS 5
    Angular 9

所以我無法獲得造船廠及其類別......使用 JSon ：

"vaisseau" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },

我在谷歌上查看了其他加載 JSon 的不同方法（Angular 中的接口，或者將 Json 作為參數的構造函數，作為數組瀏覽......）

我不明白我的問題來自哪里......在背面的一側，我必須為我的 REST 提供參數，以便它每次發送所有信息，而不是指向實體或 Angular 的鏈接以加載從鏈接加載的不同對象？

在網上看了很多教程后，我仍然不知道轉換JSon Interfaces，Mapper是最好的方法.......

Answer 1

通過在您的代碼中添加觀察者響應來嘗試使用這種方法

  public getVaisseaux(page: number, size: number) {
    return this.httpClient.get(this.host + '/vaisseaus?page=' + page + '&size=' + size, {
      observe: 'response'
    });
  } 

如果它不起作用，請開發人員更改他返回的數據， _embedded不應有_符號

Answer 2

最后，我使用了可以讓我恢復我想要的東西的投影。 這種 JSON 格式歸因於 Spring HATEOAS，它不提供子實體，而是簡單地發送指向它的鏈接。 互聯網上有許多解決方案可以解決這個“問題”，我個人選擇了預測。 這是一個給感興趣的人的小例子：返回：

 @Projection(name = "vaisseauProjection", types = Vaisseau.class)
public interface VaisseauProjection {

    public long getId();
    public String getNom();
    public String getDescription();
    public String getImage();
    public Constructeur getConstructeur();
    public Categorie getCategorie();

}

正面 ：

  public getVaisseauxByKeyword(mc: string, sort: string, order: string, page: number, size: number): Observable<PageableVaisseaux> {
    return this.httpClient.get<PageableVaisseaux>(this.host + '/vaisseaus/search/byNomPage?mc=' + mc + '&sort=' + sort + ','
      + order + '&page=' + page + '&size=' + size + '&projection=vaisseauProjection');
  }