I'm grappling with 2D arrays in typescript and have a query about it.
My goal is to craft an array that holds arrays where each element boasts a distinct data type, but all these elements correspond to different interfaces.
In the illustration below, you can observe four variables (elements) - member, publication, research, and courses sequentially. These represent the Member[], Publication[], Research[], and Course[] interfaces respectively.
this.answer = [this.member,this.publication,this.research,this.course]; Post experimentation, I noticed that elements like 'this.member' carry values correctly, yet there seems to be an issue when placing these elements into 'this.answer'.
Thank you!
import { Component, Input, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject, Observable } from 'rxjs';
import { MemberService } from 'src/app/services/member.service';
import { Member } from 'src/app/models/member';
import { PublicationService } from 'src/app/services/publication.service';
import { Publication } from 'src/app/models/publication';
import { ResearchService } from 'src/app/services/research.service';
import { Research } from 'src/app/models/research';
import { CourseService } from 'src/app/services/course.service';
import { Course } from 'src/app/models/course';
@Component({
selector: 'app-survey',
templateUrl: './survey.component.html',
styleUrls: ['./survey.component.scss']
})
export class SurveyComponent implements OnInit {
@Input() public renderPage;
array1 : string[] = ['member','publication','research','course','event','banner'];
answer;
ren;
member : Member[]=[];
publication :Publication[]=[];
research : Research[]=[];
course : Course[]=[];
constructor(
public modal: NgbActiveModal,
private ms: MemberService,
private ps: PublicationService,
private rs: ResearchService,
private cs: CourseService) {
this.renderPage = this.renderPage;
}
ngOnInit(): void {
this.ms.getAll().subscribe(member => {
this.member = member.sort((a, b) => a.index - b.index);
});
this.ps.getAll().subscribe(publication => {
this.publication = publication.sort((a, b) => a.id - b.id);
});
this.rs.getAll().subscribe(research => {
this.research = research.sort((a, b) => a.id - b.id);
});
this.cs.getAll().subscribe(course => {
this.course = course.sort((a, b) => a.id - b.id);
});
//I have a problem in this code..!!
this.answer = [this.member,this.publication,this.research,this.course];
//this.answer1.forEach((element,idx)=>console.log(idx+ '||'+ element));
this.array1.forEach(
(element, idx) => {
if(element === this.renderPage){
this.ren = this.answer[idx];
}
}
);
}
}
The unique definitions of the four interfaces stand out here. Each interface hosts diverse variables specific to its structure.
export interface Member {
id: number;
name: string;
role: string;
degree: string;
interest: string;
employment: string;
email: string;
website: string;
enrolled_year: number;
enrolled_month: number;
graduation_year: number;
is_alumni: boolean;
image_path: string;
image_org_name: string;
index: number;
updated?: boolean;
}