我必须打印一张包含详细信息的表格答案

【问题标题】：i have to print a table with the details if any student has <20 in any subject the status should be failed and colored red我必须打印一张包含详细信息的表格
【发布时间】：2020-04-19 09:15:11
【问题描述】：

我已经尝试将学生的状态打印为“不及格”，如果他在任何科目中得分低于 20 分，如果科目总和在所有科目中最高，并且如果他不及格总分“tr”，则打印“topper” " 颜色必须是红色字体

 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]

如何打印相应的状态，请帮帮我

【问题讨论】：

您在模板中尝试了什么？
学生姓名卷号总分状态 {{data.name |标题大小写 }} {{data.rollNumber}} {{data.marks.Maths+data.marks.English+data.marks.Science}}

标签： javascript arrays json angular typescript

【解决方案1】：

我用一个解决方法做了一个堆栈闪电战。

这个可以升级，但是很简陋

https://stackblitz.com/edit/angular-4zazjv

基本上我用 [ngClass] 管理状态并在视图中打印你想要的表格。

在component.css中添加了.red类

希望这对你有用。

【讨论】：

我稍微修改了我的堆栈闪电战。这可能对你有用

【解决方案2】：

使用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 编写条件样式

【讨论】：