Угловой вызов покоя api бесконечно

Question

Использование пружины для бэкэнда.Цель состоит в том, чтобы получить изображение по идентификатору и показать изображение на странице.

Я получаю allItemsData из API остальных, который содержит образец json

[
    {
        "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 для извлечения данных изображения (Blob) с сервера на основе Spring. Проблема в том, что api изображения вызывается бесконечно.Если я выполню getImageData в конструкторе, он будет выполнен только два раза.

1. В чем причина?
2. Пожалуйста, укажите любой другой альтернативный угловой способ или остальное api design

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.
        })
    })
)