javascript - 脚本中的 Angular 颜色变化

Question

我正在研究 Angular 6。我在单击功能后从脚本更改 div 标签的颜色，我需要将其更改回透明

这是我的 View ，当我单击继承时，第一行的背景颜色发生变化

单击“继承”后，当我单击“覆盖方法”时，第二行会突出显示但是我需要从第一行中删除背景颜色

侧边栏 HTML 代码

  <div *ngFor="let classes of classesObject ">
    <input id='{{classes}}' name='radio' type='radio'>
    <label (click)="clickClass(classes)" for='{{classes}}'>
      {{classes}}
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='swanky_wrapper__content'>
        <ul *ngFor="let conceptName of concepts">
          <li (click)="getConcepts(conceptName['conceptName'],[classes])">{{conceptName["conceptName"]}}</li>
        </ul>
      </div>
    </label>
  </div>

行显示的Html代码

 <div *ngFor="let lines of lineList; let i= index">
    <div id="line_{{i}}" class="code" >&nbsp;&nbsp;{{lines}}</div>
 </div>

getConcept 方法的 typescript 代码

  for (var no in this.relatedLineNo) {
    var lines = this.relatedLineNo[no] - 1;
    document.getElementById(`line_` + lines).style.backgroundColor = "black";
    document.getElementById(`line_` + lines).style.color = "white";
    document.getElementById(`line_` + lines).style.cursor = "pointer";
    document.getElementById(`line_` + lines).setAttribute("tooltip", this.messageTip);
  }

Answer 1

不用在 for 循环中手动查找行:

document.getElementById(

尝试更多 Angular 风格的方法:

[ngClass]="{ hilite: i === relatedLineNo }"

发生的情况是，在 *ngFor 循环内，Angular 将使用 latedLineNo 评估当前行索引“i”，并“自动”突出显示该行。

更新

如果“relatedLineNo”是一个数组，那么您可以使用它:

[ngClass]="{ hilite: relatedLineNo.indexOf(i) !== -1 }"

工作并更新stackblitz .