Typescript - объект отображает правильные данные, но свойства не определены при доступе

Когда я регистрирую весь объект, все данные отображаются, но когда я пытаюсь получить доступ к свойствам, они не определены. Как будто свойства объекта не сопоставлены с их данными.

Компонент, содержащий данные:

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
})
export class CardComponent implements OnInit, AfterContentInit, ISimulable {
  ...

  cardData?: ICardData;
  
  ...

  constructor(
    private simulationService: SimulationService,
    private dispatcher: DataDispatcherService
  ) {}
  
  ...

  getData(): void {
    var temp = this.dispatcher.getCardDataFromType(this.cardDataClass, {
      timestamp: '2021/10/10', model: this.radioValue as DataModels, distribution: 
      this.radioValue as DataDistributions
    });
    this.cardData = temp.rawData as ICardData;
    console.info(temp);
    console.info(temp.rawData);
  }

  ...

Вывод консоли: Typescript - объект отображает правильные данные, но свойства не определены при доступе

Отобразился класс:

export class BoshGasDataCardDispatcher extends ADispatchedData {

  constructor(storageService: DataStorageService, input: ICardDispatchInput) {
    super(storageService, input);
  }

  /**
   * @param {DataStorageService} storageService The service fetching data.
   * @param {ICardDispatchInput} input The data used to fetch raw data.
   */
  protected async selectData(storageService: DataStorageService, input: ICardDispatchInput): Promise<void> {
    var tempData: ICalculation = await storageService.getCalculation(input.timestamp);
    var tempTranslation: ILanguageSettings = await storageService.getTranslationData("en-GB");

    var tempCard: ICardData = {title: tempTranslation.texts['Raceway_boshGasGroupBox_Text'], rows:[]};

    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);

    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);

    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);
 
    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);

    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);
 
    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);

    this.rawData = tempCard;
  }
}

Расширенный абстрактный класс:

import { DataStorageService } from "../../core/services/data-storage.service";

export abstract class ADispatchedData{

  rawData: any;

  constructor(storageService: DataStorageService, input: any) {
    this.selectData(storageService, input);
  }

  /**
   * Fill rawData with the necessary data for the creating component.
   * @param {DataStorageService} storageService The service fetching data.
   * @param {any} input The data used to fetch raw data.
   */
  protected abstract selectData(storageService: DataStorageService, input: any): void;
}

ICardData файл:

import { ICardRowData } from './card-row-data.interface';
export interface ICardData{
  readonly title: string;
  readonly rows: ICardRowData[];
  message?: string;
}

ICardRowData файл:

export interface ICardRowData{

  readonly label: string;

  readonly value: number | string;

  simValue: number | string;

  readonly unit: string;
}
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
1
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема была в реализациях абстрактного класса. Я добавлял ключевое слово async в метод selectData, так как его невозможно добавить к абстрактному исходному методу. Однако этого недостаточно, чтобы вызвать мою проблему, что действительно испортило, так это вызвать этот метод в конструкторе абстрактного класса. Чтобы решить эту проблему, мне пришлось удалить этот вызов из конструктора и поместить его в другое место.

Абстрактный класс:

import { DataStorageService } from "../../core/services/data-storage.service";

export abstract class ADispatchedData{

  rawData: any;

  constructor(protected storageService: DataStorageService, input: any) {
   // Removed the call to selectData
   // Put the service as protected to avoid redundancy and ease the use of selectData
  }

  abstract selectData(input: any): Promise<void>; 
  // Added the Promise<void> for consistency
  // Removed the service from the parameters, now a protected property 
}

Пример реализации:

...

export class OxycoalCardDispatcher extends ADispatchedData {

  constructor(storageService: DataStorageService, input: ICardDispatchInput) {
    super(storageService, input);
  }

  async selectData(input: ICardDispatchInput): Promise<void> {
    var tempData: ICalculation = await this.storageService.getCalculation(input.timestamp);
    var tempTranslation: ILanguageSettings = await this.storageService.getTranslationData("en-GB");

    var tempCard: ICardData = {title: tempTranslation.texts["Raceway_OxyCoalGroupBox_Text"], rows:[]};

    tempCard.rows.push({
      label: placeholder,
      value: placeholder,
      simValue: placeholder,
      unit: placeholder
    } as ICardRowData);

    this.rawData = tempCard;
  }
}

Где теперь выполняется вызов:

async getCardDataFromType(dataClass: Type<ADispatchedData>, input: ICardDispatchInput): Promise<ADispatchedData> {
    var temp = new dataClass(this.storageService, input);
    await temp.selectData(input);
    return temp;
  }

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