Question

使用spring作为后端。目的是通过id获取图像并在页面中显示图像。

我正在从一个包含json示例的REST API接收allItemsData

[
    {
        "id": 1,
        "itemTitle": "'title'",
        "itemDescription": "desccription",
        "userDetails": {
            "name": "adminnew",
            "email": "user2@gmail.com",
            "user_role_id": 1
        },
        "categoryId": 0,
        "imageDetailsList": [
            {
                "id": 87,
                "imageLocation": "C:\\imagePath\\faviconxR0.47460100811443706.ico"
            },
            {
                "id": 88,
                "imageLocation": "C:\\imagePath\\faviconxR0.47460100811443702.ico"
            }
        ]
    },....]

下面显示的角度代码

<tr *ngFor="let data of allItemsData">
          <td>{{data.id}}</td>
          <td>{{data.itemTitle}}</td>
          <td>{{data.itemDescription}}</td>
          <td>{{data.userDetails.name}}</td>          
          <td>
            <table class='table table-striped'>
              <tr>
                <th>id</th>                
                <th>image</th>
                <th>imageLocation</th>
              </tr>
              <tr *ngFor="let imageData of data.imageDetailsList">
                <td>{{imageData.id}}</td>
                <td><img [src]="getImage(imageData.id)></td>
                <td>{{imageData.imageLocation}}</td>
              </tr>
            </table>
          </td>
        </tr>

当调用getImageData（）时，客户端将执行rest api从基于Spring的服务器中获取Image data（Blob）。问题是image api被无限调用。如果我在构造函数中执行getImageData，它将仅执行两次。

背后的原因是什么？
请提及其他任何有角度的方式或其他api设计

Answer 1

下午好！

其对象正在数据数组中每个迭代项上调用getImageData（）函数。

问题是Angular会不断检查以检测更改，从而为用户更新信息。当组件初始化时，contructor（）运行，并且不会再次发生。

我的建议（因为没有看到您的控制器）是：使用服务提出您的API请求，然后使用RxJS运算符正确填充图像。示例：

this.myService.getData().pipe(
    map(data => {
        data.imageDetailsList.map(item => {
            // item.id - Apply your logic to get the image correctly here, be sure to iterate a new array and return it so that the call returns the expected result.
        })
    })
)

无限调用REST API

1 个答案: