Question

我使用typeScript创建了一个扩展方法，在该扩展方法中，我想创建一个静态变量，也可以说一个普通变量。通过将数据或对象发送给ServiceCollector方法并尝试将其存储在数组对象中，我已经调用了3次。这是我的代码

import { Employee } from "./Employee.model";

let datafetcher: Employee[] = [];

declare global {
  interface Object {
    ServiceCollector(data): any[];
  }
}

Object.defineProperty(Object.prototype, 'ServiceCollector', {
  value: function(data) {
    datafetcher.push(data);
    console.log(datafetcher);
    return "done";
  },
  enumerable: false
});

数组datafetcher正在存储值，但是问题在于它会用最新的值覆盖所有先前的数据。

Array : 0: {code: 101, FirstName: "Aditya"}

/*Adding another value */
Array : 0: {code: 102, FirstName: "Aryan"}
Array : 1: {code: 102, FirstName: "Aryan"}

/*Adding another value */
Array : 0: {code: 103, FirstName: "Kundan"}
Array : 1: {code: 103, FirstName: "Kundan"}
Array : 2: {code: 103, FirstName: "Kundan"}

我尽力了，但无法弄清为什么我会出现这种行为。 这就是我调用ServiceCollector方法的方式

import { Component, OnInit } from '@angular/core';
import { Employee } from './Employee.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  EmployeeObject: Employee = {};
  ParentObject: Object = {};

  submit1() {
    this.EmployeeObject.code = 102;
    this.EmployeeObject.FirstName = 'Aryan Toke';
    console.log("Submit 1", this.EmployeeObject);
    this.ParentObject.ServiceCollector(this.EmployeeObject);
  }

  submit2() {
    this.EmployeeObject.code = 103;
    this.EmployeeObject.FirstName = 'Kundan Toke';
    console.log("Submit 2", this.EmployeeObject);
    this.ParentObject.ServiceCollector(this.EmployeeObject);
  }

  ngOnInit(): void {
    this.EmployeeObject.code = 101;
    this.EmployeeObject.FirstName = 'Aditya Toke';
    console.log("ngoninit", this.EmployeeObject);
    this.ParentObject.ServiceCollector(this.EmployeeObject);
  }

}

点击按钮submit1()和submit2()的方法将被调用

Answer 1

（用于存储数据的）服务my-service.ts

import { Employee } from "./Employee.model";

@Injectable({
  providedIn: 'root'
})
export class MyService {

  myStoreArray: Employee[] = [];

  saveData(data:Employee){
    this.myStoreArray.push(data);
    console.log("Data saved "+JSON.stringify(data));
  }

}

在component.ts

中

import { Component, OnInit } from '@angular/core';
import { Employee } from './Employee.model';
import { MyService } from 'where you like to put you service ./my-service.ts';

export class AppComponent implements OnInit {

  constructor(private mySvc: MyService) { }

  submit1() {
    let newEmployee: Employee = {
      code: 102,
      FirstName: 'Aryan Toke'
    }
    console.log("Submit 1", newEmployee);
    this.mySvc.saveData(newEmployee);
  }
  submit2() {
    let newEmployee: Employee = {
      code: 103,
      FirstName: 'Kundan Toke'
    }
    console.log("Submit 2", newEmployee);
    this.mySvc.saveData(newEmployee);
  }
  ngOnInit(): void {
    let newEmployee: Employee = {
      code: 101,
      FirstName: 'Aditya Toke'
    }
    console.log("ngoninit", newEmployee);
    this.mySvc.saveData(newEmployee);
  }
}

Answer 2

发生这种情况的原因是因为您每次都将对EmployeeObject的相同引用添加到该数组，并将其变异为具有最新值。

如果在将数据传递给服务时创建一个新对象，一切都会很好

例如：

this.ParentObject.ServiceCollector({code: X, FirstName: Y});

与使用Object.defineProperty创建方法相比，弗朗切斯科以上答案中提供的代码不是更惯用的Typescript / Angular代码-我建议您在这里阅读有关服务的信息：https://angular.io/guide/architecture-services

在扩展方法TypeScript中创建数组

2 个答案: