除了[源]或src="{{}}“之外，是否还有其他方法可以绑定到”“src="">
除了[源]或src="{{}}“之外，是否还有其他方法可以绑定到”“src="">
提问于 2019-04-24 07:36:17
这种类型的语法有效吗？
<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)}}" />有什么建议吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-24 10:35:45
有两种方法可以访问对象的属性：
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中使用变量动态访问对象属性的更多参考
Stack Overflow用户
发布于 2019-04-24 10:44:50
您可以使用函数获取图像路径，如下所示：
<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> Stack Overflow用户
发布于 2019-04-24 07:48:57
属性名称连接不会像您尝试的那样工作，它会添加属性的值，而不是名称。要修改名称，您必须使用方括号表示法，并将属性名称改为字符串：
[src]="this['someImg' + (i + 1)] || ''"(我还用短路OR替换了三元表达式，使其不那么麻烦)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55820758
复制相关文章
相似问题