Javascript 动态更改角度模式中各种输入的css属性

我想知道做一件事的正确方法。我有这些按钮，我希望按钮的不透明度在按下时增加。我已经这样做了，但恐怕这不是一个好的解决方案。。。 我总是听说在angular中使用jQuery不是一件好事，所以我尽量不使用元素jQuery的.css属性

<div class="calibrationDiv" *ngIf="startCalibration" (click)="onClick($event)" >

    
    <input type="button" class="Calibration" id="Pt1" [style.opacity]="0.2*calibrationPoints['Pt1'] + 0.2">
    <input type="button" class="Calibration" id="Pt2" [style.opacity]="0.2*calibrationPoints['Pt2'] + 0.2">
    <input type="button" class="Calibration" id="Pt3" [style.opacity]="0.2*calibrationPoints['Pt3'] + 0.2">
    <input type="button" class="Calibration" id="Pt4" [style.opacity]="0.2*calibrationPoints['Pt4'] + 0.2">
    <input type="button" class="Calibration" id="Pt5" [style.opacity]="0.2*calibrationPoints['Pt5'] + 0.2">
    <input type="button" class="Calibration" id="Pt6" [style.opacity]="0.2*calibrationPoints['Pt6'] + 0.2">
    <input type="button" class="Calibration" id="Pt7" [style.opacity]="0.2*calibrationPoints['Pt7'] + 0.2">
    <input type="button" class="Calibration" id="Pt8" [style.opacity]="0.2*calibrationPoints['Pt8'] + 0.2">
    <input type="button" class="Calibration" id="Pt9" [style.opacity]="0.2*calibrationPoints['Pt9'] + 0.2">
    
</div>

我是这样做的：

  <input *ngFor = "let calibrationPoint of calibrationPoints; let i = index"
            type = "button"
            class = "Calibration"
            (click) = "onClick(i)"
            [style.opacity] = "calibrationPoint['opacity']">

在.ts文件中：

export class CalibrationComponent  {


  private calibrationPoints: Array<Object>;                           // CSS proprety of Calibration points     


  constructor() {
    // Initialize the array of CSS propreties
    this.calibrationPoints = new Array(9);
    for (var i = 0; i < 9; i++) {
      this.calibrationPoints[i] = {opacity: 0.2}
    }
   }

 
  /**
   * Modify the css propreties of a calibration point on click.
   * @param {number} index The index of the point to modify.
   */
  private onClick(index: number): void { 
    if (this.calibrationPoints[index]["opacity"] < 1)
      this.calibrationPoints[index]["opacity"] += 0.2
  }
}

导出类校准组件{
私有校准点：数组；//校准点的CSS属性
构造函数（）{
//初始化CSS属性的数组
此.calibrationPoints=新阵列（9）；
对于（变量i=0；i<9；i++）{
此.calibrationPoints[i]={不透明度：0.2}
}
}
/**
*单击即可修改校准点的css属性。
*@param{number}index要修改的点的索引。
*/
private onClick（索引：number）：void{
如果（此校准点[索引][“不透明度”]<1）
此.calibrationPoints[索引][“不透明度”]+=0.2
}
}

不确定这是否是最好的方法，但它是有效的