来自@Input 的值在 ngOnInit Angular 之后无效

Question

I face with strange problem an @Input variable changed after ngInit called.

So, I have 3 angular component like this

AcComponent.html

<div *ngFor="let d of this.deviceService.ObservableDevice | async;index as idx; trackBy: trackingIdenity">
    <app-ac-controller [device]="d"></app-ac-controller>
</div>

AcController.html

<div class="col-md-8 position-relative">
     <div class="vertical-line"></div>
     <app-ac-panel [ac]="this.device.ac" [deviceId]="this.device.id"></app-ac-panel>
</div>

And AcPanel.component.ts as leaf component the problem happen here

export class AcPanelComponent implements OnInit {
  @Input() public ac: AcModel;
  @Input() public deviceId: number;
  
  constructor(public deviceService: DeviceService, private cdr : ChangeDetectorRef) { 

  }

  ngOnInit(): void {
    console.log('ngOnInit: ' + this.deviceId);
  }

  public powerModeHandler(toMode: string): void {
    console.log(`powerModeHandler for deviceId ${this.deviceId}`);
  }

  public modeHandler(toMode: string): void {
    console.log(`modeHandler for deviceId ${this.deviceId}`);
  }
}

When I press button on element deviceId = 2

• press button to call powerModeHandler() log print correct deviceId = 2

• press button to call modeHandler() log print deviceId = 1 ??? (I don't know why) I'm sure when ngInit it's assign correct deviceId on each element

Here log when ngOnInit call

ngOnInit: 1
ngOnInit: 2
ngOnInit: 3

Any one know what reason this case happen and how to fixed this.

Thank you.

Update. Added Stackblitz

stackblitz here

Answer 1

It's the radio buttons....

Took me forever to home in on the problem. Your radio buttons have all the same id attribute, and your label elements get confused!!

This is what you have to do to fix it:

<input type="radio" class="btn-check" name="btnMode" id="btnCool_{{deviceId}}" autocomplete="off" (change)="this.modeHandler('COOL')">
<label class="btn rounded-0 fw-bold" for="btnCool_{{deviceId}}"
       [ngClass]="{'btn-info': this.ac.mode === 'COOL', 'btn-outline-info': this.ac.mode !== 'COOL'}">
  Cool
</label>

To be honest, I'd also change the name attribute in the same way...

Answer 2

When you click on modeHandler in deviceId = 2 or 3 you see that page scrolls up to deviceId = 1 . It seems you click on modeHandler in deviceId = 1 !!

So this happen because you are in loop ( *ngFor ) and using same id for radio button (and also for label <label for="btnCool"> ).

It is good idea to use dynamic id when you use *ngFor . you can use index or any id you know it is unique. Here you can use deviceId

<div class="btn-group" role="group">
    <input type="radio" class="btn-check" name="btnMode" id="btnCool{{deviceId}}" autocomplete="off" (click)="this.powerModeHandler('COOL')">
    <label class="btn rounded-0 fw-bold" for="btnCool{{deviceId}}"
           [ngClass]="{'btn-info': this.ac.mode === 'COOL', 'btn-outline-info': this.ac.mode !== 'COOL'}">
        Cool
    </label>
    <input type="radio" class="btn-check" name="btnMode" id="btnDry{{deviceId}}" autocomplete="off" (click)="this.modeHandler('DRY')">
    <label class="btn fw-bold rounded-right" for="btnDry{{deviceId}}"
           [ngClass]="{'btn-secondary': this.ac.mode === 'DRY', 'btn-outline-secondary': this.ac.mode !== 'DRY'}">
        Dry
    </label>
</div>

ForkedStackblitz