Angular 2 déclarer un tableau d'objets

Question

Angular 2 déclarer un tableau d'objets

J'ai l'expression suivante:

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

Qui ne fonctionne pas parce que mon tableau n'est pas de type string, Il contient une liste d'objets. Comment puis-je delcare mon tableau pour contenir une liste d'objets?

* sans un nouveau composant qui déclare la classe A pour la phrase qui semble un déchet

22

angular typescript

demandé sur Roberto Russo 2016-09-09 11:55:16

4 réponses

score 45 · Answer 1

Je suppose que vous utilisez typescript.

Par prudence, vous pouvez définir votre type comme un tableau d'objets qui doivent correspondre à certains d'interface:

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

Ou syntaxe courte sans définir un type personnalisé:

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

score 13 · 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 '},
];

Ou plutôt...

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

score 7 · Answer 3

Une autre approche particulièrement utile si vous souhaitez stocker des données provenant d'une API externe ou D'une base de données serait la suivante:

Créez une classe qui représente votre modèle de données

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

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

Dans votre classe de composants, vous créez un tableau vide de type Data et remplissez ce tableau chaque fois que vous obtenez une réponse de L'API ou de la source de données que vous utilisez

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

score 2 · Answer 4

Tout d'abord, générez une Interface {[6]

En supposant que vous utilisez TypeScript & CLI angulaire vous pouvez en générer une en utilisant la commande suivante

ng g interface car

Après cela, définissez les types de propriétés

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

Vous pouvez maintenant importer votre interface dans la classe que vous voulez.

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

Et mettre à jour la collection/tableau d'objets de voiture en poussant des éléments sur le tableau.

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

Plus sur les interfaces:

Un interface est un artefact TypeScript, il ne fait pas partie de ECMAScript. Une interface est un moyen de définir un contrat sur une fonction par rapport aux arguments et à leur type. Avec les fonctions, une interface peut également être utilisée avec une classe pour définir des types personnalisés. Une interface est un type abstrait, elle ne contient aucun code comme le fait une classe. Il définit uniquement la "signature" ou la forme D'une API. Pendant la transpilation, une interface ne génère aucun code, elle est uniquement utilisée par Typescript pour contrôle de type pendant le développement. - https://angular-2-training-book.rangle.io/handout/features/interfaces.html

Las etiquetas más populares

Angular 2 déclarer un tableau d'objets

4 réponses