Ошибка при возврате массива объектов из функции Angular

Добрый день, у меня возникла проблема, когда я хочу вернуть массив объектов из внешней функции.

Я объявил класс Object с двумя свойствами, его конструктором и тем, который работает, когда я возвращаю массив с более чем 50 объектами для этого примера, я помещаю только 4 объекта

export class Object {
  formcontrolName: String;
  formcontrolTraducido: String;

  constructor(formcontrolName: String, formcontrolTraducido: String) {
    this.formcontrolName = formcontrolName;
    this.formcontrolTraducido = formcontrolTraducido;
  }

  getData() {
    return [
      { formcontrolName: 'callId', formcontrolTraducido: 'CId' },
      { formcontrolName: 'collegeCareerId', formcontrolTraducido: 'Carrera' },
      {
        formcontrolName: 'collegeDepartmentId',
        formcontrolTraducido: 'Nombre del Departamento/Centro',
      },
      {
        formcontrolName: 'detailedAreaKnowledgeId',
        formcontrolTraducido: 'Campo Detallado',
      },
    ];
  }
}

Проблема в том, что я хочу вызвать из другого компонента функцию getData класса Object, но при возврате получаю следующую ошибку:

Введите '() => { formcontrolName: string; formcontrolПеревод: строка; }[]' отсутствуют следующие свойства типа 'Object[]': pop, push, concat, join

import { Component, OnInit } from '@angular/core';
import { Object } from './object';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
 data: Object;
  arrayData: Object[];
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData;
    console.log('arrayData: ' + this.arrayData);
  }

}

пример кода stackblitz

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

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прежде всего, тип свойства arrayData не относится к типу Объект, который является классом, который вы используете, поэтому более правильный тип будет таким же, как тот, который возвращается методом getData.

Вы можете получить возвращаемый тип с помощью вспомогательного типа машинописного текста ReturnType, поэтому хороший способ ввести это будет выглядеть так:

  arrayData: ReturnType<Object['getData']>;

У меня есть одна рекомендация: не использовать имя Object для класса, поскольку оно имеет то же имя, что и Object встроенная функция javascript.

После этого проблема, которая у вас есть здесь:

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }

Это то, что вы назначаете метод переменной, которая ожидает массив чего-то, поэтому вы получаете ошибку:

Type '() => { formcontrolName: string; formcontrolTraducido: string; }[]' is missing the following properties from type 'Object[]': pop, push, concat, join

Вам просто нужно вызов метод, например:

    this.arrayData = this.data.getData();

Имея все это в виду, окончательный код будет выглядеть так:

import { Component, OnInit } from '@angular/core';
import { Object } from './object';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular';
  data: Object;
  arrayData: ReturnType<Object['getData']>;
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }
}

Извините меня, Даниил, но теперь у меня появляется другая ошибка при выполнении вашего решения: Не удается прочитать свойства неопределенного (чтение «getData»)

Kenny Cruz 09.04.2022 21:17

Вероятно, это ошибка времени выполнения, потому что вы не инициализировали data экземпляром Object. Вы можете определить данные как: data = new Object('something', 'something')

Daniel Rodríguez Meza 09.04.2022 21:19

Большое спасибо, Даниил, все сработало правильно

Kenny Cruz 09.04.2022 21:50

Другие вопросы по теме