Angular 2 声明对象数组

Question

我有以下表达式:

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

因为我的数组不是字符串类型，而是包含对象列表的类型，所以它不能工作。我该如何声明我的数组来包含对象列表？*不使用新组件，并声明一个看起来浪费的句子类。

- TheUnreal

Answer 1

我假设你正在使用TypeScript。

如果要更加谨慎，你可以将你的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

---

回答是有效的，但如果你有一个对象的许多属性怎么办？这不是标准方式@Martin。在Angular2文档中，可能会找到这样的声明，但它并不使用TypeScript标准方式。 - micronyks

Answer 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 '},
];

- micronyks

---

我正在使用这个解决方案的第二部分 - rather 部分。它起作用了。谢谢。 - Tanzeel

但是现在我不明白如何在这里推送值。就像我想推送一个对象数组，就像这样：this.mySentenses.push(res)。我得到了错误。类型“type []”的参数无法分配给类型“type”的参数... - Tanzeel

Answer 3

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

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

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

- Ezio

---

我该如何将“dataList”设置为大小为5？ - JackSlayer94

Answer 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 的一部分。接口是定义函数与其参数及类型相关的契约的一种方式。除了函数外，接口也可以与类一起使用，以定义自定义类型。 接口是一种抽象类型，它不像类那样包含任何代码。它只定义 API 的“签名”或形状。在转译过程中，接口不会生成任何代码，它仅由 TypeScript 在开发期间用于类型检查。- https://angular-2-training-book.rangle.io/handout/features/interfaces.html

- 0x1ad2

---

应该使用this.cars.push()而不是this.car.push()，或者使用本地变量的名称。最好在代码中展示如何声明它，因为只有这样才能回答这个问题。 - SwissCoder

Answer 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 '},
];

- nick

Answer 6

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

对于对象数组:

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

如果在绑定中出现未定义的情况，请确保在Oninit()中初始化它。

- Priyanka Arora

Answer 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 '},
];

- Annas