我有一个从API返回的以下格式的巨大数组，我需要遍历它并显示在移动应用程序中。有没有办法在angular2（新手）中做到这一点
我之所以不使用JSON格式，是因为由于数据很大，所以当我在postman中运行它时，它不会返回任何数据，因此我想在Ionic 3框架和Angular2中直接循环一个数组
Array
(
[0] => Array
(
[SubjectID] => 16
[QuestionID] => 4358
[QuestionType] =>
[Question] => Which one is a wrong statement?
[Answer1] => some answer1.
[Answer2] => some answer2
[Answer3] => some answer3
[Answer4] => some answer4
[CorrectAnswer] => 4
[Hint] =>
[DiffLevel] => Medium
[Status] => Active
[AnsDescription] => some description.
)
[1] => Array
(
[SubjectID] => 16
[QuestionID] => 4359
[QuestionType] => SingleAnswer
[QuestionType] =>
[Question] => Which one is a wrong statement?
[Answer1] => some answer1.
[Answer2] => some answer2
[Answer3] => some answer3
[Answer4] => some answer4
[CorrectAnswer] => 4
[Hint] =>
[DiffLevel] => Medium
[Status] => Active
[AnsDescription] => some description
)
)
这是我的.ts文件： 从＆＃39; @ angular / core＆＃39;中导入{Component}; 从＆＃39; ionic-angular＆＃39;;
导入{NavController} @Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
items:any[];
constructor(public navCtrl: NavController) {
}
this.items =
}
请帮我解决这个问题，我需要找到一种方法来循环显示这些数据并在应用程序中显示它。提前致谢 ！！ 期待一些答案。
答案 0 :(得分：1)
<div *ngFor="let item of items">
<div [(ngModel)]="item.QuestionID"> {{item.Question}} </div>
</div>
In Class Function you can use
this.items.forEach((item, index) => { ... })
答案 1 :(得分：0)
为什么不使用前端的密钥：
Data table support by default "YYYY-MM-DD" so to support date format "dd-MMM-yyyy" and "MMM-yyyy" we need to include a plugin code below:-
(function () {
var customDateDDMMMYYYYToOrd = function (date) {
"use strict"; //let's avoid tom-foolery in this function
// Convert to a number YYYYMMDD which we can use to order
var dateParts = date.split(/-/);
return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
};
// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
// so that it's the first data type (so it takes priority over existing)
jQuery.fn.dataTableExt.aTypes.unshift(
function (sData) {
"use strict"; //let's avoid tom-foolery in this function
if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
return 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
})();
and we have to specify the new introduced type to column of date as below:-
var costRevenueGraph = $('#costRevenueGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": costRevenueGraphData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'cost',"sType":'formatted-num' },
{ "mDataProp": 'costOFInternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFExternalFailure',"sType":'formatted-num' },
{ "mDataProp": 'costOFPreventiveInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOFAssessmentInvestment',"sType":'formatted-num' },
{ "mDataProp": 'costOfRedHerringInvestment',"sType":'formatted-num' },
{ "mDataProp": 'revenue',"sType":'formatted-num' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'dd-MMM-yyyy');
}
},{
"aTargets": [1,2,3,4,5,6,7],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('currency')(data.aData[data.mDataProp], '$');
}
}]
});
As same above if we want to support format "MMM-yyyy" we need to do a little hack
(function () {
var customDateDDMMMYYYYToOrd = function (date) {
"use strict"; //let's avoid tom-foolery in this function
// Convert to a number YYYYMMDD which we can use to order
date= "01-"+date
var dateParts = date.split(/-/);
return (dateParts[2] * 10000) + ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 100) + (dateParts[0]*1);
};
// This will help DataTables magic detect the "dd-MMM-yyyy" format; Unshift
// so that it's the first data type (so it takes priority over existing)
jQuery.fn.dataTableExt.aTypes.unshift(
function (sData) {
sData= "01-"+date
"use strict"; //let's avoid tom-foolery in this function
if (/^([0-2]?\d|3[0-1])-(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)-\d{4}/i.test(sData)) {
return 'date-dd-mmm-yyyy';
}
return null;
}
);
// define the sorts
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-asc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? -1 : ((ordA > ordB) ? 1 : 0);
};
jQuery.fn.dataTableExt.oSort['date-dd-mmm-yyyy-desc'] = function (a, b) {
"use strict"; //let's avoid tom-foolery in this function
var ordA = customDateDDMMMYYYYToOrd(a),
ordB = customDateDDMMMYYYYToOrd(b);
return (ordA < ordB) ? 1 : ((ordA > ordB) ? -1 : 0);
};
})();
and how to implement here is a demo
var costRevenueGraph = $('#fcSimulationGraphTbl').dataTable({
"sPaginationType": "full_numbers",
"paging": true,
"bSort": true,
"ordering": false,
"info": false,
"iDisplayLength": 10,
"aaData": forecastingGraphObjTblData,
"sImgDirPath": "http://assets.cms.gov/resources/libs/datatables/1.9.1/images/",
"aoColumns": [
{ "mDataProp": "day","sType":'date-dd-mmm-yyyy' },
{ "mDataProp": 'forecastDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualDemand',"sType":'formatted-num' },
{ "mDataProp": 'actualAbsolutePercentageError',"sType":'percent' },
{ "mDataProp": 'trackingSignal',"sType":'percent' }
],
"aoColumnDefs": [{
"aTargets": [0],
"fnRender": function(data, type, row) {
return $filter('date')(data.aData[data.mDataProp], 'MMM-yyyy');
}
},{
"aTargets": [1,2],
"aType":'formatted-num',
"fnRender": function(data, type, row) {
return $filter('number')(data.aData[data.mDataProp]);
}
},{
"aTargets": [3,4],
"aType":'percent',
"fnRender": function(data, type, row) {
return data.aData[data.mDataProp]+'%';
}
}]
});
或者您可以使用<div *ngFor="#elem of data">
<div [(ngModel)]="elem.SubjectId"
</div>
功能