無限循環與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

使用異步管。

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


    }); 

}