打字稿：遍历两个类之间的每个成员并标记 Angular 中的差异

Question

如何比较两个 class 模型并找到相应的差异？以下是两个成员完全相同的模型，我们需要进行比较。

Typescript 中是否有执行此操作的算法？ * 新结果 class 应该使用 class 成员和布尔值不同的标志创建？

在 Typescript 算法中寻找简单的方法。它需要接受任何 class,

注意：class 中的某些成员包含 class 本身。

目前

Class:

export class PropertyLocation {   
    streetName: string;
    streetType: string;
    postdirectional?: string;
    unitNumber?: string;
    unitType?: string;
    city: string;
    state?: string;
    postalCode: number;
    postalCodeExtension?: string;

    effectiveStartDate: Date;
    addressChangeReason?: AddressChangeReasonDto
    addressSource?: SourceOfAddressDto;
}

结果Class数组样本：

如果有更优的存储方式，欢迎修改

export class DifferenceClass {   
    ClassMember: string;
    DifferentFlag: boolean
}

寻找代码解决方案，避免使用第三方库，因为公司不喜欢

Answer 1

为什么不直接在 class 中构建一个 method/function 来运行比较。您可以通过单独比较每个属性（输入所有内容）或只是循环 class 中的每个键并将其与传入对象中的每个键进行比较来做到这一点。

class DifferenceClass {   
    constructor(classMember, differenceFlag) {
      this.ClassMember = classMember;
      this.DifferenceFlag = differenceFlag;
    }
}
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  isSame(person) {
    if (person instanceof Person) {
      const differences = [];
      for (const key in person) {
        if (this[key] !== person[key]) {
          differences.push(new DifferenceClass(key, true));
        }
      }
      return differences;
    } else {
      throw new Error('Object is not a Person class');
    }
  }
}

const p1 = new Person('John', 'Doe');
const p2 = new Person('Jane', 'Doe');
console.log('Should be empty', p1.isSame(p1));
console.log('Should have diff results', p1.isSame(p2));
console.log('should be an exception', p1.isSame(1));

Answer 2

我有一个比较两个对象并进行深度比较的函数

export const compare = (obj1: any, obj2: any): boolean =>
  Array.isArray(obj1)
    ? Array.isArray(obj2) && obj1.length === obj2.length && obj1.every((item, index) => compare(item, obj2[index]))
    : obj1 instanceof Date
    ? obj2 instanceof Date && obj1.getDate() === obj2.getDate()
    : obj1 && typeof obj1 === 'object'
    ? obj2 && typeof obj2 === 'object' &&
      Object.getOwnPropertyNames(obj1).length === Object.getOwnPropertyNames(obj2).length &&
      Object.getOwnPropertyNames(obj1).every(prop => compare(obj1[prop], obj2[prop]))
    : obj1 === obj2;

您可以将其与

一起使用

const diff = (obj1, obj2) => Object.keys(obj1).map(key => ({ ClassMember: key, DifferentFlag: !compare(obj1[key], obj2[key]) }));

Answer 3

您可以使用 deep-diff 库：

import { diff } from 'deep-diff';

const differences = diff(location1, location2);

它使用不同属性的路径创建了一个很好的差异对象。

Answer 4

另一种方法是使用管道将 class 添加到您的模板

import { Pipe, PipeTransform } from '@angular/core';

const resolveProperty = (obj: any, property: string): any =>
  property ? property.split('.').reduce((result, prop) => (result ? result[prop] : undefined), obj) : undefined;

@Pipe({
  name: 'different'
})
export class DifferentPipe implements PipeTransform {
  transform(obj: any, obj2: any, property: string): boolean {
    return resolveProperty(obj, property) !== resolveProperty(obj2, property);
  }
}

并且在您的视图中，如果对象已更改，您可以添加一个 class

<div [ngClass]="{ 'changed': original | changed : new : property }">

打字稿：遍历两个类之间的每个成员并标记 Angular 中的差异

Typescript: Iterate Through Each Member between Two Classes and Flag Difference in Angular

javascript

typescript

angular

angular7

打字稿：遍历两个 类 之间的每个成员并标记 Angular 中的差异

Typescript: Iterate Through Each Member between Two Classes and Flag Difference in Angular

javascript

typescript

angular

angular7

打字稿：遍历两个类之间的每个成员并标记 Angular 中的差异