javascript - Ionic - Angular - 组件的三个输入中有两个具有未定义的值

Question

我在使用 @input() 时遇到问题，当我想使用它时，三分之二的输入具有未定义的值，但可以在模板文件中使用插值显示。

.ts:

export class NoteCanvasPageComponent {
  @Input() note: any;
  @Input() canvasWidth: any;
  @Input() canvasHeight: any;

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){
    console.log(this.note.posY + " " + this.canvasHeight);
    console.log(this.note.posX + " " + this.canvasWidth);
    this.textArea.nativeElement.style.top = this.note.posY * this.canvasHeight;
    this.textArea.nativeElement.style.left = this.note.posX * this.canvasWidth;
  }

}

console.log() 打印:
0.623 未定义
0.578 未定义

模板文件:

<textarea #TextArea class="note-canvas-page">
  {{note.text}}
  {{canvasHeight}}
  {{canvasWidth}}
</textarea>

给予:
这是一个注释
512
360

为什么三个输入中只有两个在组件文件中有未定义的值？

我这样使用组件:

<div *ngFor="let note of arrayNotes">
  <note-canvas-page [canvasHeight]=canvasHeight [canvasWidth]=canvasWidth [note]=note *ngIf="note.display"></note-canvas-page>
</div>

谢谢你的帮助

Answer 1

另一种解决方案可能是:

export class NoteCanvasPageComponent {
  _canvasWidth: any;
  _canvasHeight: any;
  _note: any;

  @Input() 
  set note(value: any) {
      this._note = value;
      initComponent();
  }

  get note() {
      return this._note;
  }

  @Input() 
  set canvasWidth(value: any) {
      this._canvasWidth = value;
      initComponent();
  }

  get canvasWidth() {
      return this._canvasWidth ;
  }

  @Input() 
  set canvasHeight(value : any) {
      this._canvasHeight = value;
      initComponent();
  }

  get canvasHeight() {
      return this._canvasHeight ;
  }

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){

  }

  initComponent() {
    if(this._note && this._canvasWidth && this._canvasHeight) {
        console.log(this._note.posY + " " + this._canvasHeight);
        console.log(this._note.posX + " " + this._canvasWidth);
        this.textArea.nativeElement.style.top = this._note.posY * this.canvasHeight;
        this.textArea.nativeElement.style.left = this._note.posX * this._canvasWidth;
    }
  }

}

这具有附加值，每当注释、canvasHeight 或 canvasWidth 发生变化时，style.top 和 style.left 将被重新计算。