web-dev-qa-db-fra.com

Angular 2 déclarant 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 car mon tableau n'est pas de type string contient plutôt une liste d'objets. Comment puis-je supprimer mon tableau pour qu'il contienne une liste d'objets?

* sans un nouveau composant qui déclare la classe de phrases qui semble un gaspillage

arraysangulartypescript
33
TheUnreal

Je suppose que vous utilisez TypeScript.

Pour être extrêmement prudent, vous pouvez définir votre type comme un tableau d’objets devant correspondre à certaines interfaces:

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 une syntaxe courte sans définir de type personnalisé:

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

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

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 est la suivante:

  1. 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;
    }

  2. Dans votre classe de composants, créez un tableau vide de type Data et remplissez ce tableau chaque fois que vous recevez 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);
    }
  }
}
9
Ezio

Commencez par générer une interface

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

ng g interface car

Après que définir les types de données de ses 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 de votre choix.

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

Et mettez à jour la collection/le tableau d'objets car en poussant les éléments dans le tableau.

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

Plus sur les interfaces:

Une interface est un artefact TypeScript, elle ne fait pas partie d’ECMAScript. Une interface est un moyen de définir un contrat sur une fonction en fonction des arguments et de leur type. Outre 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. Lors de la transpilation, une interface ne générera aucun code, elle est uniquement utilisée par TypeScript pour la vérification du type pendant le développement. - https://angular-2-training-book.rangle.io/handout/features/interfaces.html

3
0x1ad2

Type de données: array_name:datatype[]=[]; Exemple de chaîne: users:string[]=[];

Pour un tableau d'objets:

Type d'objet: object_name:objecttype[]=[{}]; Exemple d'utilisateur: Users:user[]=[{}];

Et si dans certains cas, la liaison devient indéfinie, assurez-vous de l'initialiser sur Oninit().

0
Priyanka Arora