在角度8中使用同步融合动态生成列时未显示数据

时间:2019-07-27 17:46:18

标签: typescript syncfusion angular8

我想根据一个数组数据生成网格列,并且网格数据应该在另一个数组中。 我可以生成列,但字段未正确映射。 我使用了Syncfusion grid。这是文档https://ej2.syncfusion.com/angular/documentation/grid/getting-started/

这是我的html代码

<div class="container">
    <div class="row">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary">Add </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <ejs-grid #grid id='PagingGrid' [dataSource]='uersSurveyAnswers' [allowPaging]='true' height=325
                            [pageSettings]='pageSettings' allow-scrolling="true">
                            <e-columns> 
                                <ng-template #template ngFor let-column [ngForOf]="columns"> 
                                    <e-column [field]="column.field" 
                                              [headerText]="column.headerText" 
                                              [width]="column.width"> 
                                    </e-column> 
                                </ng-template> 
                            </e-columns> 
                        </ejs-grid>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的打字稿代码

 @ViewChild('grid', { static: false })
  public grid: GridComponent;

  public pageSettings: any;
  public columns: any;
  surveyQuestions: any = [
    {
      id: 11,
      surveyNo: 5,
      qNo: 1,
      question: 'What is the country you would like to travel?',
      qType: 1,
      noAnswrs: 4,
      answerType: 1,
      answers: [{
        title: 'America',
        path: ''
      },
      {
        title: 'Australia',
        path: ''
      }, {
        title: 'India',
        path: ''
      }, {
        title: 'England',
        path: ''
      }]
    },
    {
      id: 12,
      surveyNo: 5,
      qNo: 2,
      question: 'What type of credit cards do you have?',
      qType: 2,
      noAnswrs: 4,
      answerType: 1,
      answers: [{ title: 'Visa', path: 'Mastercard' }, { title: 'American', path: '' },
      { title: 'Express', path: '' }, { title: 'Discover', path: '' }]
    },
    {
      id: 13,
      surveyNo: 5,
      qNo: 3,
      question: 'Please rank the following features in order of importance,where 1 is the most important to you.?',
      qType: 3,
      noAnswrs: 4,
      answerType: 1,
      answers: [{ title: 'Location', path: '' }, { title: 'Confort', path: '' },
      { title: 'Service', path: '' }, { title: 'Value for money', path: '' }]
    },
    {
      id: 14,
      surveyNo: 5,
      qNo: 4,
      question: 'What is your idea about our institute?',
      qType: 4,
      noAnswrs: 0,
      answerType: 1,
      answers: []
    },
    {
      id: 15,
      surveyNo: 6,
      qNo: 5,
      question: 'What is the fastest car?',
      qType: 5,
      noAnswrs: 4,
      answerType: 2,
      answers: [{ title: 'Audi', path: 'ferrari' },
      { title: 'Bugatti', path: 'ferrari' },
      { title: 'BMW', path: 'ferrari' },
      { title: 'Acura', path: 'ferrari' }]
    },
    {
      id: 16,
      surveyNo: 7,
      qNo: 6,
      question: 'What is the fastest car?',
      qType: 6,
      noAnswrs: 4,
      answerType: 2,
      answers: [{ title: 'Audi', path: 'ferrari' },
      { title: 'Bugatti', path: 'ferrari' },
      { title: 'BMW', path: 'ferrari' },
      { title: 'Acura', path: 'ferrari' }]
    }
  ];
  uersSurveyAnswers: any = [
    {
      userEmail: 'amara@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['1']
        },
        {
          qNo: 2,
          ansrs: ['1', '0', '1', '1']
        },
        {
          qNo: 5,
          ansrs: ['2']
        },
        {
          qNo: 6,
          ansrs: ['0', '1', '1', '0']
        }
      ]
    },
    {
      userEmail: 'saman@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['3']
        },
        {
          qNo: 2,
          ansrs: ['0', '0', '1', '1']
        },
        {
          qNo: 5,
          ansrs: ['1']
        },
        {
          qNo: 6,
          ansrs: ['1', '1', '0', '0']
        }
      ]
    },
    {
      userEmail: 'gayan@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['2']
        },
        {
          qNo: 2,
          ansrs: ['1', '1', '0', '0']
        },
        {
          qNo: 5,
          ansrs: ['4']
        },
        {
          qNo: 6,
          ansrs: ['1', '0', '1', '1']
        }
      ]
    },
    {
      userEmail: 'sumedha@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['1']
        },
        {
          qNo: 2,
          ansrs: ['1', '0', '1', '1']
        },
        {
          qNo: 5,
          ansrs: ['2']
        },
        {
          qNo: 6,
          ansrs: ['0', '1', '1', '0']
        }
      ]
    },
    {
      userEmail: 'kamal@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['1']
        },
        {
          qNo: 2,
          ansrs: ['1', '0', '1', '1']
        },
        {
          qNo: 5,
          ansrs: ['2']
        },
        {
          qNo: 6,
          ansrs: ['0', '1', '1', '0']
        }
      ]
    },
    {
      userEmail: 'sagara@gmail.com',
      qustns: [
        {
          qNo: 1,
          ansrs: ['3']
        },
        {
          qNo: 2,
          ansrs: ['0', '0', '1', '1']
        },
        {
          qNo: 5,
          ansrs: ['1']
        },
        {
          qNo: 6,
          ansrs: ['0', '1', '1', '0']
        }
      ]
    }
  ];


  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    const colsSet = [];
    const firstCol = {
      field: 'userEmail', headerText: 'Respondent Email', width: '150'
    };
    colsSet[0] = firstCol;
    let index = 1;
    for (const qsn of this.surveyQuestions) {
      let col = {};
      switch (Number(qsn.qType)) {
        case 1:
        case 5:
          {
            col = {
              field: 'qustns[' + index + '].ansrs[0]', headerText: 'Q' + (index + 1) + '.1', width: '90'
            };
            colsSet[index] = col;
          }
          break;
        case 2:
        case 6:
          {
            let subIndex = index;
            for (let i = 0; i < qsn.noAnswrs; i++) {
              col = {
                field: 'qustns[' + index + '].ansrs[' + i + ']', headerText: 'Q' + (index + 1) + '.' + (i + 1), width: '90'
              };
              colsSet[subIndex] = col;
              subIndex++;
            }
          }
          break;
      }
      index++;
    }
    this.columns = colsSet;
  }

这是Stackblitz代码 https://stackblitz.com/edit/angular-5obhgm

请告诉我在这种情况下有什么问题?

谢谢

0 个答案:

没有答案