动态更改* ngFor中的src字符串

Question

我有一个需要与图像一起显示的项目列表。列表超过100个项目，我可以按字母排序，所以我知道顺序。我需要显示与每个项目匹配的图像。

<div *ngFor='let item of items; i = index>

 <span>{{item}} <img class={{i}} src='/images/i.png'>

</div>

所以我希望它看起来像：

class='0' src='/images/0.png'
class='1' src='/images/1.png'
class='2' src='/images/2.png'

以此类推，直到100。

非常感谢您的帮助

Answer 1

尝试一下：

<div *ngFor='let item of items; i = index'>
    <span>{{item}} <img class={{i}} src='/images/{{i}}.png'>
</div>

或

<div *ngFor='let item of items; i = index'>
    <span>{{item}} <img class={{i}} [src]='"/images/" + i + ".png"'>
</div>

希望这会有所帮助！

Answer 2

尝试一下。希望这会有所帮助，如果您有任何疑问，请告诉我。谢谢！

 <div *ngFor="let item of items; let i = index;">

  <span>{{item}} <img class="{{i}}" src="/images/{{i}}.png"></span>

</div>

输出：

Answer 3

您可以像这样继续使用内插

<div *ngFor='let item of items; i = index'>
    <span>{{item}} <img class={{i}} src='/images/{{i}}.png'>
</div>

或者您可以使用属性绑定

<div *ngFor='let item of items; i = index'>
    <span>{{item}} <img class={{i}} [src]='"/images/" + i + ".png"'>
</div>

在许多情况下，现在插值是属性绑定的便捷替代方法。 Angular实际上在渲染视图之前将这些插值转换为相应的属性绑定。

没有技术上的理由偏爱一种形式。

Answer 4

尝试

<div *ngFor='let item of items;let i = index;'>
    <span>{{item}} <img [class]="i" src='assets/images/{{i}}.png'>
</div>

我希望这会有用。