html - 切换 JSON 对象值

Question

我有以下代码在轮播中显示图像

<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;
}

Answer 1

使用 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);