带有 javascript 的无限循环（Angular NgFor 和 http 请求）

Question

问题是同时我正在尝试检查资源服务器上是否存在一个图像，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 '#';
        }
    });
}

Answer 1

使用 async 管道。

<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('#');
        }
    });


    });

}