Я реализовал всплывающее окно dx, которое очень хорошо открывает и показывает данные, но Назначенные данные не отображаются должным образом.
On Trainings.Component.html Дополнительный код, написанный как
<div *ngFor="let trngs of trainings">
<dx-button text="View" (onClick)="onShowTrainingDetailInfo(trngs.trainingdetail)">
</dx-button>
</div>
<dx-popup [showTitle]="true" title="Orientation Training Plan" [closeOnOutsideClick]="true" [(visible)]="trainingDetailVisible">
<div *dxTemplate="let data of 'content'">
<div *ngFor="let trainingdetail of currentTrainings">
{{trainingdetail.task}}// Here the data is showing
<span *ngFor="let assigned of trainingdetail.assignedto1">
{{assigned.trainingAssignedName}}<br />//Here The data is not showing
</span>
<dx-button class="btn btn-link dropdown-toggle condition_popup" text="View" (onClick)="onShowTrainingPopupInfo(trainingdetail.trainingPopup)">
</dx-button>
</div>
</div>
</dx-popup>
<dx-popup [showTitle]="true" title="Company Manual Training" [dragEnabled]="false" [closeOnOutsideClick]="true" [(visible)]="trainingPopupVisible">
<div *dxTemplate="let data of 'content'">
{{currentTrainingPopup.task}}
</div>
TrainingsService.ts как показано ниже (извините, если пропущены некоторые данные)
const training: Trainings[] = [
{
trainingsId: 1, plan: 'Orientation', dateAssigned: '11/2/18', status: 'In progress', done: 40
, trainingdetail:
[
{
trainingDetailId: 1, trainingsId: 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: '',
assignedTo1:
[
{ trainingsAssignedId: 1, trainingAssignedName: 'john', trainingAssignedImage: 'user-photo.png', trainingDetailId: 1 }
],
trainingPopup:
{
trainingDetailId: 1, done: 'true', 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: '', attachmentFile:
[{ attachmentFileId: 1, fileName: 'Terms & Abbreviations.docx' }, { attachmentFileId: 1, fileName: 'Terms & Abbreviations1.docx' }],
history: [
{ historyDetailId: 1, title: 'Ingrid Desna Assigned Task to John Smith and Angela Muller', date: '09/09/16' },
{ historyDetailId: 2, title: 'Ingrid Desna Created Plan', date: '09/09/16' }
],
assignedTo2: [
{ trainingsAssignedId: 1, trainingAssignedName: 'john', trainingAssignedImage: 'user-photo.png', trainingDetailId: 1 },
{ trainingsAssignedId: 2, trainingAssignedName: 'john 2', trainingAssignedImage: 'user-photo-2.png', trainingDetailId: 1 }
]
}
}
]
}
];
@Injectable()
export class TrainingsService {
getTraining(): Trainings[] {
return training;
}
}
export interface Trainings {
trainingsId: number;
plan: string;
dateAssigned: string;
status: string;
done: number;
trainingdetail: TrainingDetails[];
}
export interface TrainingDetails {
trainingDetailId: number;
trainingsId: number;
done: string;
task: string;
status: string;
dueDate: string;
attachment: string;
assignedTo1: TrainingDetailsAssigned[];
trainingPopup: TrainingDetailsPopUp;
}
export interface TrainingDetailsAssigned {
trainingsAssignedId: number;
trainingAssignedName: string;
trainingAssignedImage: string;
trainingDetailId: number;
}
Файл Trainings.component.ts ниже кода
export class TrainingsComponent implements OnInit {
currentTrainingPopup: TrainingDetailsPopUp[];
currentTrainings: Trainings[];
trainings: Trainings[];
public trainingDetailVisible = false;
public trainingPopupVisible = false;
constructor(service: TrainingsService) {
this.trainings = service.getTraining();
}
onShowTrainingDetailInfo(trainingDetail) {
this.currentTrainings = trainingDetail;
this.trainingDetailVisible = true;
}
onShowTrainingPopupInfo(trainingPopup) {
this.currentTrainingPopup = trainingPopup;
this.trainingPopupVisible = true;
}
}
Единственная проблема заключается в том, что, когда я поместил assignto1 в Popup, данные приходят как пустые, а не как данные john, иначе все данные идут хорошо.
Я не знаю, какую ошибку я совершил там