我想根据一个数组数据生成网格列,并且网格数据应该在另一个数组中。 我可以生成列,但字段未正确映射。 我使用了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
请告诉我在这种情况下有什么问题?
谢谢