web-dev-qa-db-ja.com

Angular 2オブジェクトの配列を宣言する

私は次の式を持っています：

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

私の配列はstring型ではなく、オブジェクトのリストが含まれているため機能しません。オブジェクトのリストを含むように配列を削除するにはどうすればよいですか？

*無駄に思える文のクラスを宣言する新しいコンポーネントなし

arraysangulartypescript
33
TheUnreal

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}> = [...];
67
martin
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 '},
];
19
micronyks

外部APIまたはDBからのデータを保存する場合に特に役立つもう1つのアプローチは次のとおりです。

  1. データモデルを表すクラスを作成する

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

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

  2. コンポーネントクラスで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);
    }
  }
}
9
Ezio

まず、Interfaceを生成します

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

3
0x1ad2

データ型：array_name:datatype[]=[];文字列の例：users:string[]=[];

オブジェクトの配列の場合：

オブジェクトタイプ：object_name:objecttype[]=[{}];ユーザーの例：Users:user[]=[{}];

また、バインディングで未定義になる場合がある場合は、Oninit()で必ず初期化してください。

0
Priyanka Arora