Подтвердить что ты не робот

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 а содержит список объектов. Как я могу delcare мой массив, чтобы содержать список объектов?

* без нового компонента, который объявляет класс для предложения, которое кажется пустой тратой

4b9b3361

Ответ 1

Я предполагаю, что вы используете машинопись.

Чтобы быть особенно осторожным, вы можете определить свой 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}> = [...];

Ответ 2

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

Ответ 3

Другой подход, который особенно полезен, если вы хотите хранить данные, поступающие из внешнего API или БД, будет следующим:

  • Создайте класс, представляющий вашу модель данных

    export class Data{
        private id:number;
        private text: string;
    
        constructor(id,text) {
            this.id = id;
            this.text = text;
        }
    
  • В вашем классе компонента вы создаете пустой массив типа 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);
        }
      }
    }
    

Ответ 4

Сначала создайте интерфейс

Предполагая, что вы используете 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

Ответ 5

array_name:datatype[]=[]; данных: имя- array_name:datatype[]=[]; Пример строки: users:string[]=[];

Для массива объектов:

Тип объекта: object_name:objecttype[]=[{}]; Пример user: Users:user[]=[{}];

И если в некоторых случаях оно Oninit() неопределенным в привязке, обязательно инициализируйте его в Oninit().