角度2の式がチェックされた後に変更されました。動的画像Src

Question

のエラーイベントのリストを作成するループがあります。

<ng-container *ngFor="let event of venueEvents"> 
    <div class="event-card"> 
     <div class="event-image"> 
      <img src={{getRandomImage()}}> 
     </div> 
     <div class="event-details"> 
      <p class="event-title">{{event.name}}</p> 
      <p class="event-time">{{event.nextOccursOn | date}}</p> 
     </div> 
    </div>  
</ng-container> 

ご覧のとおり、画像は機能が設定された動的画像です。

getRandomImage() { 
    let baseImageLink = "http://lorempixel.com/640/480/", 
     linkKey = { 
      '1': 'nature', 
      '2': 'sports', 
      '3': 'cat', 
      '4': 'nightlife', 
      '5': 'food' 
     }, 
     randomNumber = Math.floor((Math.random() * 5) + 1); 
    return baseImageLink + linkKey[randomNumber]; 
} 

これは期待どおり動作していますが、コンソールにエラーが表示されます。

EXCEPTION: Error in ./VenueDetailComponent class VenueDetailComponent - inline template:64:21 caused by: Expression has changed after it was checked. Previous value: 'http://lorempixel.com/640/480/sports'. Current value: 'http://lorempixel.com/640/480/cat'. 

これは、実際のアプリケーションには存在しない一時的な機能ですが、問題を理解し、解決方法を知りたいと思います。

Answer 1

あなたはその角度の実行が検出getRandomImage()を変更するたびに呼び出され、毎回、異なる値が返され

<img src={{getRandomImage()}}> 

呼ばれるたびに異なる値を返すビューにメソッドをバインドするので、あなたはそのエラーを取得します。

値を生成し、配列に格納し、メソッドの代わりに配列に直接バインドする必要があります。