比较两个没有对象引用的对象 Angular 10

Question

我想比较两个对象看它们是否相等。对象 A (offer) 是原始对象，对象 B (offerTemp) 是 A 的副本。

对象A显示在组件的table中，查看是否有任何更改table我想比较A和B。但是当我调用函数时检查它们是否相等它表示对象不相等。我认为这是因为对象 A 有对象的引用而对象 B 没有（至少当我在控制台中记录这两个对象时我看到的是这样）。

对象 A（要约）（来自控制台）：

Offer {id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

对象 B（offerTemp）（来自控制台）：

{id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

来自component.ts:

ngOnInit(): void {
    this.offer = this.offerService.FindById(this.editOfferId);
    this.offerTemp = Object.assign({}, this.offer);
  }

cancelSelected(offer: Offer): void{
    if (offer === this.offerTemp) {
    // do stuff...
    }
    else {
      console.log(this.offer === this.offerTemp); // false in the console
      console.log(this.offer);
      console.log(this.offerTemp);
    }
  }

这是我 html 的部分：

<div>
  <table>
    <tr> 
      <th>Selected offer details: (id: {{offer.id}})</th>
    </tr>
    <tr>
      <td>Title</td>
      <td>
        <input [(ngModel)]="offer.title" type="text" name="" id="">
      </td>
    </tr>
    <tr>
      <td>description</td>
      <td>
        <input [(ngModel)]="offer.description" type="text" name="" id="">
        </td>
    </tr>
    <tr>
      <td>auctionStatus</td>
      <td>
        <select>
          <option *ngFor="let key of keys" [value]="key" [selected]="offer.auctionStatus">{{statusen[key]}}</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>valueHighestBid</td>
      <td>
        <input [(ngModel)]="offer.valueHighestBid" type="text" name="" id="">
     </td>
    </tr>

  </table>
  <button mat-raised-button (click)="deleteSelected()"> Delete </button>
  <button mat-raised-button (click)="saveSelected(offer)"> Save </button>
  <button mat-raised-button (click)="clearSelected(offer)" > Clear </button>
  <button mat-raised-button (click)="resetSelected(offer)" > Reset </button>
  <button mat-raised-button (click)="cancelSelected(offer)"> Cancel </button>


</div>

有没有什么方法可以在没有对象引用的情况下比较这些对象，或者我可以通过其他方式解决这个问题？

Answer 1

JavaScript 没有对象和数组的 built-in 属性相等运算符。

检查对象是否相等的一种简单方法是使用 JSON.stringify:

JSON.stringify(objectA) === JSON.stringify(objectB);

这会将对象转换为字符串并使其易于比较。当对象嵌套时，这种方法也很有效。

另一种选择是使用 equals 方法（或者更好的深度相等方法，它也适用于嵌套对象），它遍历所有对象的属性并比较它们的值。

Answer 2

使用三个等号 === 比较两个对象将 return true 仅当两个变量是对同一对象的引用时。你显然不希望那样。

您需要创建自己的对象比较方式，或者使用一些 javascript 库提供 deep-compare 个对象，例如来自 lodash 的 _.isEqual:

let object = { 'a': 1 };
let other = { 'a': 1 };
 
_.isEqual(object, other);
// => true
 
object === other;
// => false

比较两个没有对象引用的对象 Angular 10

compare two objects without object reference Angular 10

javascript

comparison

object-comparison

angular