使用spring boot和Angular 4在web浏览器上的单个GET restful调用中将图像和文本显示在一起

通过使用简单的GET服务，我能够在浏览器上显示图像（.jpg文件）和文本（.txt文件）。但我已经使用了两个服务，分别用于图像和文本

如何在任何web浏览器上以一次呼叫方式同时显示图像和文本

---

我使用Spring Boot、Angular 4和MySql，我认为您的问题表述得很糟糕，如果我理解正确，您希望同时输入http调用的结果文本和图像结果。 这完全可以通过使用

rxjs

和操作符来实现：

---

感谢Nickolaus提供基于角度4透视图的解决方案。因为我有java背景，所以我希望使用java透视图来处理这个场景

我所做的是创建了一个响应Pojo（ResponseData.java），它将包含文本+图像场景的结果，并进行了rest 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] 通过调用“”（我们在这里使用Spring Rest和Spring Boot）将此数组返回到浏览器，在浏览器中我们得到如下json响应：

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

4] 在Angular 4上：（在默认4200上启动服务器）

4.1]in 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> 

{{post.contents}

现在，我们将能够显示从文本文件中读取的文本，并且显示在我们希望从特定url读取的图像的正下方

 <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>