除了[src]或src =“ {{}}”以外，还有什么方法可以绑定到<img src=""/>

Question

这种语法有效吗？

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

如果没有，如何在ngFor循环的每次迭代中向图像src动态添加变量？上面的代码为我提供了我要从中获取数据的变量，但没有提供数据。

我要从中获取数据的数据只有3个变量。 someImg1，someImg2，someImg3

我也尝试过这种代码语法。

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

我也尝试过这个。

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

和

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

有什么建议吗？

Answer 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处的变量动态访问对象属性的更多参考

Answer 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> 

Answer 3

属性名称串联无法按您尝试的方式工作，它会增加属性的值，而不是名称。要修改名称，您必须使用方括号符号，并将属性名称改为字符串：

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

（我还用短路OR代替了三元表达式，以减少麻烦）