这种类型的语法有效吗?
<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)}}" />
有什么建议吗?
发布于 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中使用变量动态访问对象属性的更多参考
发布于 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>
发布于 2019-04-24 07:48:57
属性名称连接不会像您尝试的那样工作,它会添加属性的值,而不是名称。要修改名称,您必须使用方括号表示法,并将属性名称改为字符串:
[src]="this['someImg' + (i + 1)] || ''"
(我还用短路OR替换了三元表达式,使其不那么麻烦)
https://stackoverflow.com/questions/55820758
复制相似问题