javascript - 我必须打印一张包含详细信息的表格
问题描述
我已经尝试将学生的状态打印为“不及格”,如果他在任何科目中得分低于 20,如果科目总和在所有科目中最高,并且如果他不及格,则总“tr”颜色有是红色字体
public studentData = [
{
"name":"rajiv",
"marks":{
"Maths":18,
"English":21,
"Science":45
},
"rollNumber":"KV2017-5A2"
},
{
"name":"abhishek",
"marks":{
"Maths":43,
"English":30,
"Science":37
},
"rollNumber":"KV2017-5A1"
},
{
"name":"zoya",
"marks":{
"Maths":42,
"English":31,
"Science":50
},
"rollNumber":"KV2017-5A3"
}
]
totalScore(){
this.studentData.forEach(a => {
let res = a.marks.English + a.marks.Maths + a.marks.Science
this.total.push(res)
console.log(this.total)
}
)
}
输出:[84、110、123]
status(){
this.studentData.forEach(a => {
let sample = a.marks
let values = [];
for (var key in sample) {
values.push( sample[key]);
};
console.log(values);
let val = values.find(b => b<20)
console.log(val)
return 'fail' }) }
输出:[18, 21, 45] [43, 30, 37] [42, 31, 50]
我如何相应地打印状态请帮帮我
解决方案
使用该ngClass
指令将类动态分配给模板。
NgClass-Angular
如果它只是单一样式的属性更改,请改用ngStyle
指令。
NgStyle-Angular
在您的情况下,总功能可以修改为
studentData = [];
total = [];
studentStatus = [];
totalScore() {
this.total = this.studentData.map(
student =>
student.marks.English + student.marks.Maths + student.marks.Science
);
}
这将打印每个学生的状态。
status() {
this.studentStatus = this.studentData.map(student =>
student.marks.find(mark => mark < 20) ? "Failed" : "Passed"
);
}
如果您想将状态和标记映射在一起,请执行以下操作
this.studentStatus = this.studentData.map(student => ({
...student,
status: student.marks.find(mark => mark < 20) ? "Failed" : "Passed"
}));
studentStatus
将拥有所有学生详细信息对象以及其他属性status
用于*ngFor
循环并使用ngClass
或编写条件样式ngStyle
推荐阅读
- javascript - 提交时在反应组件中获取 API
- c# - 为什么语音识别在网页中有效,但在电子中无效
- javascript - 批量删除 discord.js
- ios - TestFlight 的多个开发人员
- arrays - 如何使用 Google 表格的“开始日期”和“结束日期”创建权益曲线?
- mysql - 返回两个日期时间表达式之间的差异
- nginx - 通过 Laravel Forge 服务控制默认 Cache-Control: no-cache, private Nginx/php-fpm7.4 安装
- javascript - 检测一个按钮,然后在 JavaScript 中按下它
- flutter - 无法检索 Flutter 项目中 Graphql 突变中发生的错误
- mongodb - 将 Mongodb 数据直播到 mongo 云