首页 > 解决方案 > 我必须打印一张包含详细信息的表格

问题描述

我已经尝试将学生的状态打印为“不及格”,如果他在任何科目中得分低于 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]

我如何相应地打印状态请帮帮我

标签: javascriptarraysjsonangulartypescript

解决方案


使用该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


推荐阅读