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 的结果必须是一个承诺，因为回调是异步的：

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


    });

}

使用javascript进行无限循环（Angular NgFor和http请求）

1 个答案: