Question

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)
  });
}

这是我的控制台输出，用于显示学生的学科明智标记数组和状态，如果有任何学科<20“未通过”，否则为“通过”

**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中，所有转弯均显示为绿色，所有状态值均显示为“通过” 。该如何纠正

Answer 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}">

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

1 个答案: