切换 JSON 对象值答案

【问题标题】：Switch through JSON object values切换 JSON 对象值
【发布时间】：2019-08-15 20:55:40
【问题描述】：

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

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

【问题讨论】：

标签： html angular typescript

【解决方案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);

【讨论】：

【解决方案2】：

您也可以尝试使用辅助变量来临时保存 urlLeft。

decrease(index) {
    const auxVar = this.modules[index].urlLeft;
    this.modules[index].urlLeft = this.modules[index].urlCenter;
    this.modules[index].urlCenter = this.modules[index].urlRight;
    this.modules[index].urlRight = auxVar;
}

【讨论】：