在 devextreme 弹出分配给数据不来 [英] In devextreme popup assignedto data is not coming

问题描述

我已经实现了 dx-popup，它可以很好地打开和显示数据，但是分配给数据没有正确显示.

On Trainings.Component.html 边代码编写为

 
<dx-button text="View" (onClick)="onShowTrainingDetailInfo(trngs.trainingdetail)"></dx-button>
<dx-popup [showTitle]="true" title="定向训练计划" [closeOnOutsideClick]="true" [(visible)]="trainingDetailVisible"><div *dxTemplate="让'内容'的数据"><div *ngFor="let trainingdetail of currentTrainings">{{trainingdetail.task}}//这里显示数据<span *ngFor="letassigned of trainingdetail.assignedto1">{{assigned.trainingAssignedName}}<br//这里没有显示数据</span><dx-button class="btn btn-link dropdown-toggle condition_popup" text="View" (onClick)="onShowTrainingPopupInfo(trainingdetail.trainingPopup)"></dx-button>

</dx-popup><dx-popup [showTitle]="true" title="公司手册培训" [dragEnabled]="false" [closeOnOutsideClick]="true" [(visible)]="trainingPopupVisible"><div *dxTemplate="让'内容'的数据">{{currentTrainingPopup.task}}

TrainingsService.ts 如下(如有遗漏请见谅)

 const 训练:Trainings[] = [{trainingsId: 1, 计划: 'Orientation', dateAssigned: '11/2/18', status: 'In progress', done: 40，培训详情:[{trainingDetailId: 1, trainingsId: 1, done: 'true', status: 'In progress', task: `阅读附件中使用的常用术语和缩写列表工作.确保您学习并理解它们.`, DueDate: 'Sept 16', attachment: '',分配给1:[{ trainingsAssignedId: 1, trainingAssignedName: 'john', trainingAssignedImage: 'user-photo.png', trainingDetailId: 1 }],训练弹窗:{trainingDetailId: 1, done: 'true', task: `阅读您工作中使用的常用术语和缩写的附加列表.确保你学习了解它们.`, DueDate: 'Sept 16', attach: '',attachmentFile:[{attachmentFileId: 1, fileName: 'Terms &Abbreviations.docx' }, {attachmentFileId: 1, fileName: 'Terms &Abbreviations1.docx' }],历史: [{ historyDe​​tailId: 1, title: 'Ingrid Desna 分配给 John Smith 和 Angela Muller 的任务'，日期:'09/09/16' },{ historyDe​​tailId: 2, title: 'Ingrid Desna Created Plan', date: '09/09/16' }],分配给2:[{ trainingsAssignedId: 1, trainingAssignedName: 'john', trainingAssignedImage: 'user-photo.png', trainingDetailId: 1 },{ trainingsAssignedId: 2, trainingAssignedName: 'john 2', trainingAssignedImage: 'user-photo-2.png', trainingDetailId: 1 }]}}]}];@Injectable()导出类 TrainingsService {getTraining(): 培训[] {回归训练；}}导出界面培训{培训ID:数量；计划:字符串；日期分配:字符串；状态:字符串；完成:数量；培训详细信息:培训详细信息[]；}导出接口 TrainingDetails {trainingDetailId:数字；培训ID:数量；完成:字符串；任务:字符串；状态:字符串；到期日:字符串；附件:字符串；assignedTo1: TrainingDetailsAssigned[];trainingPopup: TrainingDetailsPopUp;}导出接口 TrainingDetailsAssigned {trainingsAssignedId: 数字；训练分配名称:字符串；trainingAssignedImage: 字符串；trainingDetailId:数字；}

代码下面的Trainings.component.ts文件

导出类 TrainingsComponent 实现 OnInit {currentTrainingPopup: TrainingDetailsPopUp[];当前培训:培训[]；培训:培训[]；public trainingDetailVisible = false;public trainingPopupVisible = false;构造函数(服务:TrainingsService){this.trainings = service.getTraining();}onShowTrainingDetailInfo(trainingDetail) {this.currentTrainings = trainingDetail;this.trainingDetailVisible = true;}onShowTrainingPopupInfo(trainingPopup) {this.currentTrainingPopup = trainingPopup;this.trainingPopupVisible = true;}}

唯一的问题是，我在 Popup 中放置assignto1 的地方数据显示为空，而不是显示john 数据，否则所有数据都运行良好.我不知道我在那里犯了什么错误

解决方案

拼写错误...

你有模型assignedTo1"(ts文件)

在你的 html 文件中你有assignedto1"

附言有时，当您构建为生产"(通过@ngtools/webpack)时，您很容易发现一些错误，因为它会验证 html/ts 文件的完整性

I have implemented the dx-popup which is opening and showing data very well but Assigned to data is not showing properly.

On Trainings.Component.html Side code written as

 <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 is as below(Please excuse if some data is missed)

 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 file below code

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

The only issue is that where I placed assignedto1 in Popup the data is coming as empty instead of showing john data else all the data is coming well. I don't know what mistake I have done over there

解决方案

bad spelling...

you have in model "assignedTo1" (ts file)

and in your html file you have "assignedto1"

P.S. Sometimes you can easily find some bug when you build as "production" (via @ngtools/webpack) because it verify integrity of html / ts files

这篇关于在 devextreme 弹出分配给数据不来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！