Angular 2 déclarant un tableau d'objets

Question

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 contenir une liste d'objets?

* sans nouveau composant déclarant la classe a pour la phrase qui semble un gaspillage

Answer 1

Je suppose que vous utilisez du tapuscrit.

Pour être extrêmement prudent, vous pouvez définir votre type comme un tableau d'objets qui doivent 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}> = [...];
 

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

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:

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

Answer 4

D'abord, générer une Interface

En supposant que vous utilisez la Machine & Angulaire de la CLI, vous pouvez en générer un à l'aide de 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 que vous voulez.

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

Et mise à jour de la collection ou un tableau d'objets de voiture en poussant des é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 Tapuscrit de l'artefact, il ne fait pas partie d'ECMAScript. Une interface est une façon de définir un contrat sur une fonction à l'égard des arguments et de leur type. Avec des fonctions, une interface peut également être utilisé avec une Classe ainsi de définir des types personnalisés. Une interface est un type abstrait, il ne contient pas de code d'une classe. Il permet seulement de la signature ou de la forme d'une API. Au cours de transpilation, une interface ne sera pas générer un code, il est seulement utilisé par la Machine pour vérifier le type au cours du développement. - https://angular-2-training-book.rangle.io/handout/features/interfaces.html