如何在 Typescript 中动态填充 Arrays 数组

Question

I'm coming from .net and MVC to Angular. I need to create an array object that is made up of multiple array objects. I know how to do this in.Net but not Angular. This is what I have in.Net for my data models:

public class ProgramScorecardModel
{
    public string programId { get; set; }
    public DateTime? reportingDate { get; set; }
    public string programName { get; set; }
    public IList<AB_ViewModel> AB_ViewModel { get; set; }
    public IList<CD_ViewModel> CD_ViewModel { get; set; }
}

public class AB_ViewModel
{
    public string rating { get; set; }
    public DateTime? reportingDate { get; set; }
    public string comments { get; set; }
}
public class CD_ViewModel
{
    public string rating { get; set; }
    public DateTime? reportingDate { get; set; }
    public string comments { get; set; }
}

These data models are populated via queries to a database. I need to do the same thing in Angular. I created interfaces like this to represent the data:

interface ProgramScorecardModel {
    programId: string;
    reportingDate: string;
    programName: string;
    AB_ViewModel: any;
    CD_ViewModel: any;
}

interface AB_ViewModel {
    rating: string;
    reportingDate: string;
    comments: string;
}
interface CD_ViewModel {
    rating: string;
    reportingDate: string;
    comments: string;
}

I've then tried to do the following in my function

let ProgramScorecard: ProgramScorecardModel[]=[]
    proglist.forEach(async (p, index) => {
        ProgramScorecard[index].programId = p.programId;
        ProgramScorecard[index].programName = p.programName;

        let AB_data = await this.GetMeasureForScorecard(p.programid,reportingdate);
        let CD_Data= await this.GetMeasureForScorecard(p.programid,reportingdate);
        
        ProgramScorecard[index].AB_ViewModel= AB_data ;
        ProgramScorecard[index].CD_ViewModel = CD_Data;
        
    });

The end result will be a ProgramScorecard with multiple programs and for each program, arrays of the AB and CD data. I keep getting errors trying to put anything into the ProgramScorecard. How do I do this?

EDIT: In regard to the questions:

1. This is the error: TypeError: Cannot set properties of undefined (setting 'programId')
2. Proglist is a an array of (programId,programName,reportingdate)
3. Index is the index of the element in the array, it is a property of the foreach.
4. I understand the programscorecard is empty. How do I populate it using this foreach.

Answer 1

This is what I ended up doing:

let ProgramScorecard: ProgramScorecardModel[] = []
for (const p of proglist) {
  const [AB_data, CD_Data] = await Promise.all([
  this.GetMeasureForScorecard(p.programId, reportingdate, "GetData1"),
  this.GetMeasureForScorecard(p.programId, reportingdate, "GetData2"),
  ]);

  this.AB_data = []
  this.CD_Data = []

  this.AB_data = AB_data
  this.CD_Data = CD_Data

  ProgramScorecard.push({
    programId: p.programId, 
    programName: p.programName,
    AB_ViewModel: this.AB_data,
    CD_ViewModel: this.CD_Data,                     
  });
}