[ngStyle] angular 【在ts里动态改变样式值】 【多个可选样式ngClass】 【选择ngFor的第一项或最后一项】

<img
    class="pillar"
    [ngStyle]="pillarMove"
    alt="machine-pillar"
  />

 interface CoordinateType {
  right: string;
  bottom?: string;
  transform: string;
}

 pillarMove: CoordinateType;

  setPillarMove() {
    this.pillarMove = {
      right: "0px",
      transform: `rotate(9deg) translateX(-${this.currentHorizontal}px) rotate(-9deg)`
    };
  }

  @Input() monitorMessage$: Observable<Monitor | DummpyData>;
  ngOnInit() {
    this.monitorMessage$
      .pipe(
        map(tablePosition => ({
          currentHorizontal: tablePosition.table_horizontal_position,
          currentVertical: tablePosition.table_height
        }))
      )
      .subscribe(tablePosition => {
        this.currentHorizontal = tablePosition.currentHorizontal;
        this.currentVertical = tablePosition.currentVertical;
        console.log("from machine-move: ", this.currentVertical);

        this.setPillarMove(); // 看这里。这样才能动态改变 pillarMove
      });
  }

---

以下是ngClass

<div
  [ngClass]="{
    'scan-card-started': id['scan_state'] === scanState.Started,
    'scan-card-unstart': id['scan_state'] !== scanState.Started,
    'width-in-main': isShowInExam === false,
    'width-in-exam': isShowInExam === true
  }">
</div>


<div [ngClass]="
id['scan_state'] === scanState.Started
  ? 'scan-card-started'
  : 'scan-card-unstart'
">
</div>

<!-- 选择ngFor的第一项或最后一项  -->
  <div
      class="recon-list"
      *ngFor="let r of id['scan_card']; let last = last"
      [ngClass]="
        itemFinished ? { finishedLastBar: last } : { unfinishedLastBar: last }
      "
      fxLayout="column"
    >
      <div
        class="recon-item"
        [ngClass]="itemFinished ? 'reconFinished' : ''"
        [ngStyle]="scanItemProgress"
        fxLayout="row"
        fxLayoutAlign="start center"
      >
        {{ r['name'] }}
      </div>
      <div class="line"></div>
    </div>

 
 

// 这个也是对ngFor最后一项的选择   
 <div
      class="recon-list"
      *ngFor="let r of id['scan_card']; let last = last"
      [ngClass]="{
        finishedLastBar: last && itemFinished === true,
        unfinishedLastBar: last && itemFinished === false
      }"
      fxLayout="column"
    >
      <div
        class="recon-item"
        [ngClass]="itemFinished ? 'reconFinished' : ''"
        [ngStyle]="scanItemProgress"
        fxLayout="row"
        fxLayoutAlign="start center"
      >
        {{ r['name'] }}
      </div>
      <div class="line"></div>
    </div>


// finishedLastBar, unfinishedLastBar 都是CSS选择器名字

// .finishedLastBar {color: black}

---

父组件:

<app-protocol-posture
      [postureState]="postureState"
></app-protocol-posture>


// ------------

  get postureState() {
    return !!this.protocolItem &&
      this.protocolItem.protocol_state === this.protocolState.Started
      ? this.protocolState.Started
      : this.protocolState.Unstart;
  }

 子组件:

<button
  class="pi-button-dark posture-button {{ buttonBackground }}">
button </button>

// -----------

@Input() postureState: string = this.protocolState.Unstart;
  constructor() {}
  get buttonBackground() {
    return this.postureState === this.protocolState.Started ? 'postureInStart' : 'postureInUnstart';
  }

// -------

.postureInStart {
  background-color: @dulled-gray;
}

.postureInUnstart {
  background-color: @secondary;
}

---