Question

我已经实现了dx-popup，它可以很好地打开并显示数据，但是分配给数据的显示不正确。

在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，因此数据显示为空，而不是显示john数据，否则所有数据都显示良好。我不知道我在那里犯了什么错误

Answer 1

拼写错误...

您在模型“ assignedTo1”（ts文件）中

，并且在您的html文件中，您具有“ assignedto1”

P.S。有时，当您将其构建为“生产”时（通过@ ngtools / webpack），您很容易发现一些错误，因为它可以验证html / ts文件的完整性

在devextreme弹出窗口中没有分配给数据

1 个答案: