使用javascript的无限循环(Angular NgFor和http请求）

Infinite loop with javascript (Angular NgFor and http request)

本文关键字：http 请求 NgFor Angular javascript 无限循环 使用      更新时间：2023-09-26

问题是，在我试图检查资源服务器上是否存在一个映像的同时，Angular NgFor正在执行其工作。

我可以猜测，img.src执行了请求，然后我在回调中的返回没有按预期返回，事实上，defaultPrincipalUrl方法没有按预期任何返回，因此Angular一次又一次地执行相同的请求。

但是，我不知道用Javascript解决这个问题的方法。

html中的NgFor看起来是这样的。

<div class="formItem">
    <div *ng-for="#principal of localService.defaultPrincipals">
        <img src="{{defaultPrincipalUrl(principal)}}" />
    </div>
</div>

其中localService.defaultPrincipals是一个包含映像名称的数组。

在Angular2@Component类中，我有下一个实现。

private imageExists(imageSrc, callback) {
    var img = new Image();
    img.onload = function () { callback(imageSrc, true); };
    img.onerror = function () { callback(imageSrc, false); };
    img.src = imageSrc;
}
defaultPrincipalUrl(principal) {
    var im = IMAGE_DOMAIN + '/principal/' + principal;
    console.log(im);
    this.imageExists(im, function (imageSrc, exists) {
        console.log('RESULT: url=' + imageSrc + ', exists=' + exists);
        if (exists) {
            return imageSrc;
        } else {
             return '#';
        }
    });
}

使用异步管道。

<div class="formItem">
    <div *ng-for="#principal of localService.defaultPrincipals">
        <img src="{{defaultPrincipalUrl(principal) | async}}" />
    </div>
</div>

defaultPrincipalUrl的结果必须是promise，因为回调是异步的：

private imageExists(imageSrc, callback) {
    var img = new Image();
    img.onload = function () { callback(imageSrc, true); };
    img.onerror = function () { callback(imageSrc, false); };
    img.src = imageSrc;
}
defaultPrincipalUrl(principal) {
    var im = IMAGE_DOMAIN + '/principal/' + principal;
    console.log(im);
    let self_ = this;
    return new Promise(function(resolve, reject) {
    self_.imageExists(im, function (imageSrc, exists) {
        console.log('RESULT: url=' + imageSrc + ', exists=' + exists);
        if (exists) {
            resolve(imageSrc);
        } else {
            resolve('#');
        }
    });

    });
}
相关文章：