除了 [src] 或 src="{{}}" 之外，有没有办法绑定到 <img src="">答案

【问题标题】：is there a way to bind to <img src=""> other than [src] or src="{{}}"除了 [src] 或 src="{{}}" 之外，有没有办法绑定到 <img src="">
【发布时间】：2019-04-24 10:44:50
【问题描述】：

这种语法有效吗？

<img [src]="someImg + (i + 1) ? someImg + (i + 1)  : ''" alt="{{ someName }}" />

如果没有，如何在 ngFor 循环的每次迭代中动态地将变量添加到图像 src？上面的代码给了我试图从中获取数据但不是数据的变量。

我试图从中获取数据的数据只有 3 个变量。一些Img1，一些Img2，一些Img3

我也试过这种代码语法。

 <img src="{{someImg + (i + 1)}} ? {{someImg + (i + 1)}}  : ''" alt="{{ someName }}" />

我什至也试过这个。

<img [src]="someImg + (i + 1)" />

和

<img src="{{someImg + (i + 1)}}" />

有什么建议吗？

【问题讨论】：

标签： angular typescript

【解决方案1】：

有两种方法可以访问对象的属性：

Dot notation: something.bar
Bracket notation: something['bar']

括号之间的值可以是任何表达式。因此，如果属性名称存储在变量中，则必须使用括号表示法：

var foo = 'bar';
something[foo];

在你的代码中 someImg1 是当前对象的属性名（this），你可以通过

<img [src]="this['someImg' + (i + 1)]" />

我在这里做了一个演示：https://stackblitz.com/edit/angular-display-dynamic-property

更多关于使用Dynamically access object property using variable的变量动态访问对象属性的参考

【讨论】：

谢谢你，这正是我想要的。我不知道你可以在组件模板中使用它。这对我有很大帮助！

【解决方案2】：

您可以使用函数来获取图像路径，如下所示：

<img [src]="getImagePath(i + 1)" alt="{{ someName }}" />

在你的 ts 文件中：

public getImagePath(index) {
    return this.someImage && this.someImage[index] ? this.someImage[index] : ''
}

如果您根本不想显示图像，您可以将函数调用绑定到父 div 并添加一个 ngIf，如下所示：

<div *ngIf="getImagePath(i + 1) as imagePath">
  <img [src]="imagePath" alt="{{ imagePath }}" />
</div>

【讨论】：

【解决方案3】：

属性名称连接不会按照您尝试的方式工作，它会添加到属性的值而不是名称。要修改名称，您必须使用方括号表示法并将属性名称改为字符串：

[src]="this['someImg' + (i + 1)] || ''"

（我还用短路或代替了三元表达式以减少繁琐）

【讨论】：

这个答案有问题吗？据我所知，它应该可以工作。