我有以下代码来显示轮播内的图像
<div class="carousel container px-0" *ngIf="module.type === 3">
<div class="container px-0 position-absolute left">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlLeft + ')'}" class="img-container" (click)="decrease(i)">
</div>
</div>
<div class="container px-0 position-absolute right">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlRight + ')'}" class="img-container" (click)="increase(i)">
</div>
</div>
<div [ngStyle]="{ 'background-image': 'url(' + module.urlCenter + ')'}" class="img-container">
</div>
</div>
module
是一个包含多个图片url的数组对象,该数组包含多个模块:
urlLeft: 'url'
urlCenter: 'url'
urlRight: 'url'
如何切换该特定模块的所有图像(可能有多个带有轮播的模块),例如通过将 urlLeft
中的图像分配给 urlCenter
,将 urlCenter
中的图像分配给 urlRight
以及 urlRight< 中的图像
到 urlLeft
?
我尝试了以下方法,但显然这不起作用,因为一旦 urlLeft
是 urlCenter
,urlRight
也将是 urlCenter
:
decrease(index) {
this.modules[index].urlLeft = this.modules[index].urlCenter;
this.modules[index].urlCenter = this.modules[index].urlRight;
this.modules[index].urlRight = this.modules[index].urlLeft;
}
最佳答案
使用 ES6 会很容易,试试这个:
const { urlLeft , urlCenter , urlRight } = this.modules[index];
this.modules[index].urlLeft = urlCenter;
this.modules[index].urlCenter = urlRight;
this.modules[index].urlRight = urlLeft;
工作代码片段:
var jsonObj = { first : 1 , second : 2 , third : 3 };
console.log( 'Before Exchange ====> ' , jsonObj);
const { first , second , third } = jsonObj;
jsonObj.first = second;
jsonObj.second = third;
jsonObj.third = first;
console.log( 'After Exchange ====> ' ,jsonObj);
关于html - 切换 JSON 对象值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57451898/