来自 Restful API 的阅读清单

Question

（第一次在这里提问）我在 java 上创建了一个休息 api，returns 我数据库中 table 汽车中的所有可用汽车。我找到了一种方法来获取其中一辆具有特定 ID 的汽车，并可以在我的页面上显示它，但它无法理解如何在同一页面中显示所有汽车。基本上我不明白如何显示我从 Rest Api 获得的数组列表并显示它。我在控制台中看到了整个数组，但在我的 html 上却看不到。我不要求 angular 的整个架构，只是想知道当我单击按钮时如何在我的应用程序组件上显示我剩下的所有项目。

我的休息时间：

@GET
    @Produces({ "application/json" })
    public List<CarDto> getCars() {
        Car macchina;
        // CarDao trasform1 = new CarDao();
        CarDto trasform2;
        // java 8+ lambda function, Stream (per divertimento)
        List<Car> listaMac = carDao.getCars();
        List<CarDto> listaMacAgg = new ArrayList<>();
        for (int i = 0; i < listaMac.size(); i++) {
            trasform2 = new CarDto(listaMac.get(i));
            listaMacAgg.add(trasform2);
        }
        return listaMacAgg;
    }

我的应用程序组件中的 class 从我的其余部分获得响应：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'rest agency test';
  caid: string = "";
  response: any;
  response2:any;
  constructor(private http: HttpClient){}

  ngOnInit(){
  }

  search(){
    this.http.get('http://localhost:8080/rest_agency/rest/hello/'+this.caid)
    .subscribe((response) => {
      this.response = response;
      console.log(this.response);
    })
  }
  allCars(){
    this.http.get('http://localhost:8080/rest_agency/rest/hello')
    .subscribe((response2) => {
      this.response = response2;
      console.log(this.response);
    })
  }




}

我的app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <p><button (click)="allCars()"> All Cars</button></p>
  <p>Search id:<input type="text" [(ngModel)]="caid">
    <button (click)="search()">Search</button></p>
  <div *ngIf="response2">
    <table>
     <ul class="heroes">
       <tr>
           <td>ID</td>
           <td>Brand</td>
           <td>Color</td>
           <td>Year</td>
           <td>Price</td>
           <td>Sold</td>
         </tr>
         <tr>
           <div *ngFor="let all of response | keyvalue">
             <td><li>{{response.caId}}</li></td>
             <td><li>{{response?.brand}}</li></td>
             <td><li>{{response?.color}}</li></td>
             <td><li>{{response?.year}}</li></td>
             <td><li>{{response?.price}}</li></td>
             <td><li>{{response?.sold}}</li></td>
           </div>
         </tr>
       </ul>
    </table>
  </div>

  <div *ngIf="response"> {{response.caid}}
      <table>
        <ul class="heroes">
          <tr>
            <td>ID</td>
            <td>Brand</td>
            <td>Color</td>
            <td>Year</td>
            <td>Price</td>
            <td>Sold</td>
          </tr>
          <tr>
              <td><li>{{response?.caId}}</li></td>
              <td><li>{{response?.brand}}</li></td>
              <td><li>{{response?.color}}</li></td>
              <td><li>{{response?.year}}</li></td>
              <td><li>{{response?.price}}</li></td>
              <td><li>{{response?.sold}}</li></td>
          </tr>
        </ul>
      </table>
  </div>

</div>

我期待来自其余部分的数组列表的所有信息的结果

这是调用一个 ID 时显示的内容：https://imgur.com/FHX4aiO 这是调用整个列表时发生的情况：https://imgur.com/pdjg4aq)

Answer 1

这里是错误

 <div *ngFor="let all of response2 | keyvalue">

改为

<div *ngIf="response">
    <table>
     <ul class="heroes">
       <tr>
           <td>ID</td>
           <td>Brand</td>
           <td>Color</td>
           <td>Year</td>
           <td>Price</td>
           <td>Sold</td>
         </tr>
         <tr>
           <div *ngFor="let respone_one of response | keyvalue">
             <td><li>{{respone_one?.caId}}</li></td>
             <td><li>{{respone_one?.brand}}</li></td>
             <td><li>{{respone_one?.color}}</li></td>
             <td><li>{{respone_one?.year}}</li></td>
             <td><li>{{respone_one?.price}}</li></td>
             <td><li>{{respone_one?.sold}}</li></td>
           </div>
         </tr>
       </ul>
    </table>
  </div>

Answer 2

您的问题来自 ngFor let all of response | keyvalue。您要查找的值在 all 参考中，而不是 response.

试试这个：

      <div *ngFor="let all of response | keyvalue">
         <td><li>{{all?.caId}}</li></td>
         <td><li>{{all?.brand}}</li></td>
         <td><li>{{all?.color}}</li></td>
         <td><li>{{all?.year}}</li></td>
         <td><li>{{all?.price}}</li></td>
         <td><li>{{all?.sold}}</li></td>
       </div>

Answer 3

你说 <div *ngIf="response2"> 但你从不在 response2 中存储任何东西。结果这个块永远不会显示。请改为

allCars(){
    this.http.get('http://localhost:8080/rest_agency/rest/hello')
    .subscribe((response2) => {
      this.response2 = response2;
      console.log(this.response);
    })
  }

--

<div *ngIf="response2">
    <table>
     <ul class="heroes">
       <tr>
           <td>ID</td>
           <td>Brand</td>
           <td>Color</td>
           <td>Year</td>
           <td>Price</td>
           <td>Sold</td>
         </tr>
         <tr>
           <div *ngFor="let all of response2 | keyvalue">
             <td><li>{{all.caId}}</li></td>
             <td><li>{{all.brand}}</li></td>
             <td><li>{{all.color}}</li></td>
             <td><li>{{all.year}}</li></td>
             <td><li>{{all.price}}</li></td>
             <td><li>{{all.sold}}</li></td>
           </div>
         </tr>
       </ul>
    </table>
  </div>

键值真的有必要吗？我强烈建议输入你的东西，避免任何

PS.: 您的 Lamba 函数可能看起来像这样（更短）

@GET
@Produces({ "application/json" })
public List<CarDto> getCars() {
    return carDao.getCars().stream().map(car => new CarDto(car)).collect(Collectors.toList());
}

来自 Restful API 的阅读清单

Reading list from Restful API

java

rest

crud

arraylist

angular