打字稿 - 对象显示正确的数据，但属性在访问时未定义

Question

当我记录整个对象时，所有数据都会显示，但当我尝试访问属性时，它们是未定义的。好像对象的属性没有映射到它们的数据。

包含数据的组件：

@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.log(temp);
    console.log(temp.rawData);
  }

  ...

控制台输出：

class显示：

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

扩展摘要class：

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

ICard数据文件：

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

Answer 1

问题出在抽象 class 的实现中。我将 async 关键字添加到 selectData 方法中，因为不可能将它添加到抽象的原始方法中。然而，这还不足以引起我的问题，真正搞砸的是在抽象 class 的构造函数中调用该方法。为了解决这个问题，我不得不从构造函数中删除该调用并将其放在其他地方。

摘要class：

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

打字稿 - 对象显示正确的数据，但属性在访问时未定义

Typescript - Object display correct datas but properties are undefined on access

properties

object

undefined

typescript