I have created the code to open the dx-popup but any how I am not able to retrieve the data in that
on TrainingsService.ts file I have written code as
@Injectable() export class TrainingsService { getTraining():Trainings[] { return training; } gettrainingdetails() { return trainingdetails; } } export interface Trainings { trainingsId: number; plan: string; DateAssigned: string; status: string, done: number; assignedto: TrainingAssigned[]; } export interface TrainingAssigned { trainingassignedId: number; AssignedName: string; trainingsId: number; } let training: Trainings[] = [ { trainingsId: 1, plan: "Orientation", DateAssigned: "11/2/18", status: "In progress", done: 40, assignedto: [ { trainingassignedId: 1, AssignedName: "John Reed", trainingsId: 1 } ] } ] export interface TrainingDetails { trainingdetailid: number; done: string; task: string; status:string; duedate: string; attachment: string; assignedto: TrainingDetailsAssigned[]; } let trainingdetails: TrainingDetails[] = [ { trainingdetailid: 1, done: "true",status: "In progress", task: "Read the attached list of common terms and abbreviation used in your job. Ensure you learn them up and understand them.", duedate: "Sept 16", attachment: "", assignedto: [ { trainingsassignedid: 1, trainingassignedname: "john", trainingassignedimage: "user-photo.png", trainingdetailid: 1 } ] }] I Trainings.component.ts file my code is as
@Component({ selector: 'app-trainings', providers:[TrainingsService], templateUrl: './trainings.component.html', styleUrls: ['./trainings.component.css'] }) export class TrainingsComponent implements OnInit { ngOnInit() { } currentTraining:Trainings[]; training:Trainings[]; trainingdetails:TrainingDetails[]; constructor(service:TrainingsService) { this.training=service.getTraining(); this.trainingdetails=service.gettrainingdetails() } showInfo(trngs) { this.currentTraining = trngs; this.popupVisible = true; } } On Trainings.Component.html Side code return as
<div *ngFor="let trngs of training"> <dx-button text="Details" (onClick)="showInfo(trngs)"> </dx-button> </div> <dx-popup [showTitle]="true" title="Information" [dragEnabled]="false" [closeOnOutsideClick]="true" [(visible)]="popupVisible"> <div *dxTemplate="let data of 'content'"> <div *ngFor="let trainingdetail of currentTraining"> {{trainingdetail.trainingdetails.task}} </div> <span *ngFor="let assigned of trainingdetail.assignedto"> {{assigned.trainingassignedname}}<br /> </span> </div> </dx-popup> I am expecting result as
<div *ngFor="let trainingdetail of currentTraining"> Read the attached list of common terms and abbreviation used in your </div> <span *ngFor="let assigned of trainingdetail.assignedto"> john </span> Task : Read the attached list of common terms and abbreviation used in your job. Ensure you learn them up and understand them.
trainingassignedname : john
2 Answers
First you should add types whenever you know args types e.g
showInfo(trngs : Trainings) //because you give parameter as Training in hmtl file 2... You should change currentTraining variable to object (not array of objects)
P.S. Reason why you don't see anything in pop is in:
<div *ngFor="let trainingdetail of currentTraining"> {{trainingdetail.trainingdetails.task}} </div> <span *ngFor="let assigned of trainingdetail.assignedto"> {{assigned.trainingassignedname}}<br /> </span> currentTraining -> is object instead array of object (in console you see propably some error)
trainingdetail -> you don't have any variable in that scope so if you want some for and you don't want use additional div or any HTML tag then you should use ng-container e.g:
<ng-container *ngFor="let t of trainings"> <div>{{t.plan}}</div> <span *ngFor="let a of t.assignedto">{{a.AssignedName}}</span> </ng-container> You can first check in the component file if the calls to getTraining and getTrainingDetails are returning the proper values, may be add the console logs. (I think the right place to make these calls are inside ngOnInit, even though constructor also works).
this.training=service.getTraining(); this.trainingdetails=service.gettrainingdetails() If this are coming null, try moving the declarations of variables - training and trainingdetails to inside the methods - getTraining and gettrainingdetails before returning or inside the constructor for TrainingService. Not really sure from the above code where its defined. If its in a seperate file, add the export keyword before.
