Angular 2 声明一个对象数组答案

【问题标题】：Angular 2 declaring an array of objectsAngular 2 声明一个对象数组
【发布时间】：2017-01-17 08:54:20
【问题描述】：

我有以下表达：

public mySentences:Array<string> = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

这不起作用，因为我的数组不是string 类型，而是包含对象列表。如何使我的数组包含对象列表？

*没有一个新的组件来声明一个看起来很浪费的句子的类

【问题讨论】：

标签： arrays angular typescript

【解决方案1】：

我假设您使用的是打字稿。

要格外小心，您可以将 type 定义为需要匹配特定接口的对象数组：

type MyArrayType = Array<{id: number, text: string}>;

const arr: MyArrayType = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

或不定义自定义类型的简短语法：

const arr: Array<{id: number, text: string}> = [...];

【讨论】：

答案是有效的，但如果你有一个对象的许多属性怎么办？这不是@Martin 的标准方式。在 Angular2 文档中，您可能会发现这样的声明，但它不是使用 typescript 的标准声明。

【解决方案2】：

public mySentences:Array<Object> = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

或者说，

export interface type{
    id:number;
    text:string;
}

public mySentences:type[] = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

【讨论】：

我正在使用这个解决方案的第二部分——相当部分。有效。谢谢。
但现在我不明白如何在这里推送值。就像我想推送这样的对象数组：this.mySentenses.push(res)。我收到错误。 'type[]' 类型的参数不能分配给 'type' 类型的参数......

【解决方案3】：

如果您想存储来自外部 API 或数据库的数据，另一种特别有用的方法是：

创建一个代表您的数据模型的类

export class Data{
    private id:number;
    private text: string;

    constructor(id,text) {
        this.id = id;
        this.text = text;
    }

在您的组件类中，您创建一个 Data 类型的空数组，并在您从 API 或您正在使用的任何数据源获得响应时填充此数组

export class AppComponent {
    private search_key: string;
    private dataList: Data[] = [];

    getWikiData() {
       this.httpService.getDataFromAPI()
        .subscribe(data => {
          this.parseData(data);
        });
     }

    parseData(jsonData: string) {
    //considering you get your data in json arrays
    for (let i = 0; i < jsonData[1].length; i++) {
         const data = new WikiData(jsonData[1][i], jsonData[2][i]);
         this.wikiData.push(data);
    }
  }
}

【讨论】：

如何将dataList 设置为 5 的大小？

【解决方案4】：

首先，生成一个接口

假设您使用的是TypeScript & Angular CLI，您可以使用以下命令生成一个

ng g interface car

然后设置其属性的数据类型

// car.interface.ts
export interface car {
  id: number;
  eco: boolean;
  wheels: number;
  name: string;
}

您现在可以在您想要的类中导入您的界面。

import {car} from "app/interfaces/car.interface";

并通过推送数组中的项目来更新汽车对象的集合/数组。

this.car.push({
  id: 12345,
  eco: true,
  wheels: 4,
  name: 'Tesla Model S',
});

更多关于接口：

接口是 TypeScript 工件，它不是 ECMAScript 的一部分。接口是一种在函数上定义关于参数及其类型的协定的方法。除了函数，接口也可以与 Class 一起使用来定义自定义类型。接口是一种抽象类型，它不像类那样包含任何代码。它仅定义 API 的“签名”或形状。在编译过程中，接口不会生成任何代码，它仅被 Typescript 用于开发过程中的类型检查。 - https://angular-2-training-book.rangle.io/handout/features/interfaces.html

【讨论】：

而不是 this.car.push()，它应该是 this.cars.push() 或任何局部变量的名称。您在代码中显示如何声明这是有道理的，因为只有这样才能回答问题。

【解决方案5】：

public mySentences:Array<any> = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

OR

public mySentences:Array<object> = [
    {id: 1, text: 'Sentence 1'},
    {id: 2, text: 'Sentence 2'},
    {id: 3, text: 'Sentence 3'},
    {id: 4, text: 'Sentenc4 '},
];

【讨论】：

【解决方案6】：

数据类型：array_name:datatype[]=[]; 示例字符串：users:string[]=[];

对于对象数组：

对象类型：object_name:objecttype[]=[{}]; 示例用户：Users:user[]=[{}];

如果在某些情况下它在绑定中未定义，请确保在 Oninit() 上对其进行初始化。

【讨论】：

【解决方案7】：

type NumberArray = Array<{id: number, text: string}>;

const arr: NumberArray = [
    {id: 0, text: 'Number 0'},
    {id: 1, text: 'Number 1'},
    {id: 2, text: 'Number 2'},
    {id: 3, text: 'Number 3 '},
    {id: 4, text: 'Number 4 '},
    {id: 5, text: 'Number 5 '},
];

【讨论】：