在扩展方法 TypeScript 中创建数组

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

在组件中.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 创建方法相比，上面 Francesco 的答案中提供的代码也不是更惯用的 Typescript/Angular 代码 - 我建议您在此处阅读有关服务的信息：https://angular.io/guide/architecture-services