在获取 DOM 视图的输出时遇到问题答案

【问题标题】：facing an issue while getting the output of a DOM view在获取 DOM 视图的输出时遇到问题
【发布时间】：2019-12-30 19:50:26
【问题描述】：

public total = []
  public topScore: number
  public studentStatus



 public studentData: any[] = [
  {
  "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"
}];

这是我的总数组控制台输出

(3) [110, 84, 123]

totalScore(){
  this.studentData.forEach(a => {
    let res = a.marks.English + a.marks.Maths + a.marks.Science
    this.total.push(res)
    console.log(this.total)
  });
}

这是我的控制台输出，用于学生的学科标记数组和状态（如果有任何学科

**details.component.ts:68 (3) [43, 30, 37]
details.component.ts:72 Pass
details.component.ts:68 (3) [18, 21, 45]
details.component.ts:72 Fail
details.component.ts:68 (3) [42, 31, 50]
details.component.ts:72 Pass**

status(){

  this.studentData.forEach(a => {
    let sample = a.marks
    let values = [];

    for (var key in sample) {
      values.push(sample[key]);
    };
    console.log(values);

    this.studentStatus = values.find(b => b < 20) ? "Fail" : "Pass" console.log(this.studentStatus) 
  }) 
}

这是我的 topScore 值的控制台输出 details.component.ts:79 123

topper(){
  this.topScore=Math.max(...this.total) console.log(this.topScore) 
}

这里所有的控制台输出都显示正确，但在 DOM 中查看所有转向绿色并且所有 状态值都显示“通过”。如何解决这个问题

【问题讨论】：

{{数据名称 |标题大小写 }} {{data.rollNumber}} {{data.marks.Maths+data.marks.English+data.marks.Science}} {{studentStatus}}
不要在 cmets 中发布代码。编辑帖子并在那里添加代码。

标签： javascript arrays json angular

【解决方案1】：

当你检查 DOM 时，你看到了吗？

<tr class="green">...</tr>
<tr class="green red">...</tr>

你不是说谁得分最高，只是说有一个。您需要区分哪个学生得分最高。此外，如果您在类中同时看到红色和绿色，这可能与您如何设置 css 样式以及哪一个将优先取决于您首先列出的是 .green 类还是 .red 类，也就是说，如果它们都具有相同的 CSS 选择器深度。

所以。要么在具有 topScore = true 或 false 的学生上添加一个属性，要么让另一个类说明最高分是什么以及谁获得了最高分。从这里，您可以执行类似

的操作

<tr *ngFor="let data of studentData" [ngClass]="{'green':topScore.name === data.name ,'red': data.marks.Maths < 20}">

【讨论】：