Angular 2 在检查后更改了表达式。 动态图像源出现错误。

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'.

这是一些临时的函数，在真正的应用程序中永远不会存在，但我想了解问题并知道它应该如何解决。

- David Aguirre

Answer 1

您会收到该错误，是因为您将一个方法绑定到视图上，每次调用时返回不同的值。

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

每次Angular运行变更检测时，都会调用getRandomImage()方法，并每次返回一个不同的值。

您应该生成这些值，将它们存储在数组中，然后直接将数组绑定到模板，而不是直接绑定到该方法。

- Günter Zöchbauer

---

如何在每次迭代中运行函数以动态地从数组中选择一个值？ - undefined

就像我之前说的那样，你应该在迭代之前运行它，然后只需像 *ngFor="let event of venueEvents; let i=index"><img [src]="images[i]"> 或类似的方式访问它。 - undefined

我已经做到了，但是对于“n”次迭代怎么办？ - undefined

var n = this.venueEvents.length; for(var i = 0; i < n; i++) { this.images.push(...); } - undefined

随机数组赢了。谢谢。 - undefined