以角度/打字稿在类数组中推送类对象答案

【问题标题】：Push class objects in class array in angular/typescript以角度/打字稿在类数组中推送类对象
【发布时间】：2020-06-21 05:50:45
【问题描述】：

我有一个代理类

export class Agent{
    ID:number;
    Name: string;
}

并且在组件中我有一个此类数组的变量

public agents : Agent[];

现在我如何在这个变量中推送值？我尝试了以下方法，但没有一个奏效。

agents.push({"ID":1,"Name":"Abc"});
agents.push(new Agent(){"ID":1,"Name":"Abc"});

【问题讨论】：

Classes - JavaScript | MDN

标签： arrays angular typescript

【解决方案1】：

agents.push(<Agent>{ ID:1, Name:"Abc" });

或

const _agent = new Agent();
_agent.ID = 1;
_agent.Name = "ABC";

agents.push(_agent);

【讨论】：

不工作。面临这个问题“后续的属性声明必须具有相同的类型”
何时使用哪种方法？你应该先初始化你的数组= []
两种方法

【解决方案2】：

您需要初始化您的数组，否则您将收到“无法读取未定义的属性 'push'”错误。像您一样使用普通对象很好（最好删除道具周围的引号），例如

let agents : Agent[] = [];
agents.push({ ID: 1, Name: "Abc"});
console.log(agents); // outputs: [ { ID: 1, Name: 'Abc' } ]

如果你真的想创建一个类的实例，你可以这样做：

const agent = new Agent();
agent.ID = 1;
agent.Name = "ABC";
agents.push(agent);

【讨论】：

不工作。面临这个问题“后续的属性声明必须具有相同的类型”
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "声明”：false，“downlevelIteration”：true，“experimentalDecorators”：true，“module”：“esnext”，“moduleResolution”：“node”，“importHelpers”：true，“target”：“es2015”，“typeRoots” : [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } }
请告诉我们你是如何初始化agents数组的。
公共代理：代理[]； //声明变量agents.push({"ID":1,"Name":"Abc"}); //推送值
@HunzlaSheikh：这就是声明。你在哪里initialize 数组，即agents = []？

【解决方案3】：

我认为，只是改变：

public agents : Agent[]; 到 public agents : Agent[]= []

并且（如果您仍然在同一个组件和方法中）：

agents.push({"ID":1,"Name":"Abc"}); 到 this.agents.push({"ID":1,"Name":"Abc"});

更新：

如果您使用相同的方法：

someMethod(){
  let localAgents :Agent[]= []; 
  localAgents.push({ID:1,Name:"Abc"});
}

如果你想在声明的同时推送，那是做不到的，你只是用默认数据初始化，你为什么要push？

例如

  public agents : Agent[] = [{ID:1,Name:"Abc"}];

DEMO

【讨论】：

所以你在构造函数中推送值，我在初始化变量时推送值。并且不能使用“this”关键字。无论如何它在构造函数中工作。
@HunzlaSheikh 一个构造函数或任何方法，没关系。如果您想要更具体的答案，请分享您的代码。而且我的回答和你的不一样。例如。你不能不推入一个未初始化的数组（就像你所做的那样）
导出类 LeafletmapComponent 实现 OnInit { public agent :Agent[]; agent.push({ID:1,Name:"Abc",Latitude:2323,Longitude:4234});构造函数() {} }
@HunzlaSheikh 仍然无法推入未初始化的数组。
@HunzlaSheikh，除非你被方法大括号包裹，否则你不能执行一个动作（推，unshift..），这就是角度的工作原理！

【解决方案4】：

首先，您的类需要一个构造函数才能使用参数对其进行初始化

export class Agent {
    ID: number;
    Name: string;

    constructor(id: number, name: string) {
        this.ID = id;
        this.Name = name;
    }
}

然后，在你的组件中

...
public agents : Agent[];
...
pushAgent(id: number, name: string) {
    this.agents = [new Agent(id, name)]
}

请记住，如果您希望 Angular 显示代理的内容，您必须通过引用更改数组。否则 Angular 将无法检测到更改。

希望这会有所帮助！

【讨论】：