Question

我已经创建了打开dx-popup的代码，但是无论如何我都无法检索其中的数据

在TrainingsService.ts文件中，我编写的代码为

@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 }
    ]
  }]

我的Trainings.component.ts文件的代码为

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

在Trainings.Component.html上，辅助代码返回为

<div *ngFor="let trngs of training">
<dx-button class="button-info" text="Details" (onClick)="showInfo(trngs)">
</dx-button>
</div>

<dx-popup class="popup" [showTitle]="true" title="Information" [dragEnabled]="false" [closeOnOutsideClick]="true" [(visible)]="popupVisible">
  <div *dxTemplate="let data of 'content'" class="flex-stack">
    <div *ngFor="let trainingdetail of currentTraining">
        {{trainingdetail.trainingdetails.task}}
    </div>
   <span *ngFor="let assigned of trainingdetail.assignedto">
        {{assigned.trainingassignedname}}<br />
   </span>
</div>
</dx-popup>

我期望结果为

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

任务：阅读附件中常用术语和缩写的列表。确保您学习并理解它们。

trainingassignedname：约翰

Answer 1

首先，只要您知道args类型，就应该添加类型例如

showInfo(trngs : Trainings) //because you give parameter as Training in hmtl file

2 ... 您应该将currentTraining变量更改为对象（而不是对象数组）

P.S。您为何看不到流行音乐的原因是：

<div *ngFor="let trainingdetail of currentTraining">
    {{trainingdetail.trainingdetails.task}}
</div>
<span *ngFor="let assigned of trainingdetail.assignedto">
     {{assigned.trainingassignedname}}<br />
</span>

currentTraining->是对象而不是对象数组（在控制台中，您可能会看到一些错误）

trainingdetail->您在该范围内没有任何变量因此，如果您要使用某些对象，而又不想使用其他div或任何HTML标签，则应使用ng-container 例如：

<ng-container *ngFor="let t of trainings">
      <div>{{t.plan}}</div>
      <span *ngFor="let a of t.assignedto">{{a.AssignedName}}</span>
</ng-container>

Answer 2

您可以首先在组件文件中检入对getTraining和getTrainingDetails的调用是否返回正确的值，可以添加控制台日志。（我认为在ngOnInit内进行这些调用的正确位置，即使构造函数也可以使用）。

this.training=service.getTraining();
this.trainingdetails=service.gettrainingdetails()

如果这将变为空，请在返回TrainingService或在其内部构造器之前，尝试将变量的声明（training和trainingdetails）移到方法内部（getTraining和gettrainingdetails）。从上面的代码中不能确定它的定义位置。如果它在单独的文件中，请在前面添加export关键字。

在dx-popup中，我无法检索数据

2 个答案: