使用Spring Boot和Angular 4在Web瀏覽器中的一次GET RESTful調用中一起顯示圖像和文本

Question

通過使用簡單的GET服務，我能夠在瀏覽器上顯示圖像（.jpg文件）和文本（.txt文件）。 但是我分別為圖像和文本使用了2個服務。

如何在單個GET調用中在任何Web瀏覽器上一起顯示圖像和文本？

Iam使用Spring Boot，Angular 4和MySql

Answer 1

感謝Nickolaus提供了基於Angular 4角度的解決方案。 由於我具有Java背景，因此一直在尋找使用Java透視圖處理這種情況的方法。

我要做的是創建了一個響應Pojo（ResponseData.java），其中將包含文本+圖片方案的結果，並進行如下的GET調用：

      @RequestMapping(value = "/get-both", method = RequestMethod.GET)
public ResponseData[]  getbothData() throws IOException {


    ResponseData respDataObj = new ResponseData() ;

    // handling text data : convert byte to string
    byte[] rbaText = transitionService.getTextData();
    String s = new String(rbaText);

    respDataObj.setContents(s);


    // for image we want path only
    String imageUrlObj = transitionService.getImageURL();
    respDataObj.setImages(imageUrlObj);
    ResponseData[] respDataArr= {respDataObj};

    return respDataArr;

}

因此，現在發生以下提到的步驟：

1]從特定位置讀取文本文件並以字節形式捕獲其內容並將其放入響應數組

2]讀取圖像的路徑，以字節形式獲取圖像並放入響應數組

3]通過調用“ http：// localhost：8080 /..../ get-both ”（我們在這里使用Spring Rest和Spring Boot）將該數組返回到瀏覽器，在瀏覽器中，我們得到這樣的json響應：

      [{"images":"http://....../test.jpg","contents":"This is a test document"}]

4]在Angular 4上：（在默認4200上啟動服務器）

4.1]在services.ts中：

getUpdates() {
return this.http.get
  ('http://localhost:8080/..../get-both').pipe(
    map(res => res.json()));

}

4.2]在app.component.ts中：

    this.dataservice.getUpdates().subscribe((postServices) => {
    this.postServices = postServices;
});

4.3]在component.html中：使用ngFor顯示數組

 <div *ngFor="let post of postServices">
<div class="card">
  <div class="item">
    <h4>
      <div>{{post.contents}}</div>
    </h4>
  </div>
  <div class="item">
    <img width="300" alt="imageTest" src="http://..../test.jpg">
  </div>
</div> 

現在，我們將能夠顯示從文本文件中讀取的文本，並且該文本正好位於我們要從特定網址獲得的圖像的下方。

Answer 2

我認為您的問題表達得不好，如果我對您的理解正確，那么您希望同時將http-calls文本和圖像的結果同時生成。 在Angular中使用rxjs和操作符CombineLatest完全可以做到 ：

combineLatest(observableOfImageCall$, observableOfTextcall$)
  .subscribe([image, text]) {
      this.image = image;
      this.text = text;
  }