以角度动态更改各种输入的css属性答案

【问题标题】：Change dynamically css proprety of various inputs in angular以角度动态更改各种输入的css属性
【发布时间】：2021-03-08 15:34:17
【问题描述】：

我想知道做一件事的正确方法。我有这些按钮，我希望按钮的不透明度在按下时增加。我已经这样做了，但恐怕这不是一个好的解决方案...... 我总是听说在 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>

【问题讨论】：

标签： javascript css angular typescript dynamic

【解决方案1】：

我是这样做的：

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

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

【讨论】：