Angular 2 erklærer et array med objekter

Jeg har følgende uttrykk:

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

som ikke fungerer fordi arrayet mitt ikke er av typen string, men inneholder en liste med objekter. Hvordan kan jeg erklære arrayet mitt for å inneholde en liste med objekter?

*uten en ny komponent som erklærer en klasse for en setning som virker bortkastet

Svar #1

Jeg antar at du bruker TypeScript.

For å være ekstra forsiktig kan du definere din type som et array av objekter som må samsvare med et bestemt grensesnitt:

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

Eller kort syntaks uten å definere en egendefinert type:

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

Svar #2

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

Eller rettere sagt,

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

Svar #3

En annen tilnærming som er spesielt nyttig hvis du vil lagre data som kommer fra en ekstern API eller en database, ville være denne:

  1. Lag en klasse som representerer datamodellen din

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

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

  2. I komponentklassen din oppretter du et tomt array av typen Data og fyller dette arrayet hver gang du får et svar fra API eller hvilken som helst datakilde du bruker

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

Svar #4

Først, generer et grensesnitt

Forutsatt at du bruker TypeScript og Angular CLI, kan du generere en ved å bruke følgende kommando

ng g interface car

Deretter sett datatypene til egenskapene dens

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

Du kan nå importere grensesnittet ditt i klassen du ønsker.

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

Og oppdater samlingen/arrayen av bilobjekter ved å legge elementer til i arrayen.

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

Mer om grensesnitt:

Et grensesnitt er en TypeScript-artifakt, det er ikke en del av ECMAScript. Et grensesnitt er en måte å definere en kontrakt på en funksjon med hensyn til argumentene og deres type. I tillegg til funksjoner kan et grensesnitt også brukes med en klasse for å definere tilpassede typer. Et grensesnitt er en abstrakt type, det inneholder ingen kode slik en klasse gjør. Det definerer bare ‘signaturen’ eller formen på et API. Under transpilasjon vil et grensesnitt ikke generere noen kode, det brukes kun av TypeScript for typekontroll under utvikling. - https://angular-2-training-book.rangle.io/handout/features/interfaces.html

Relaterte artikler