Javascript 离子-角度-组件三分之二的输入值未定义

我对

@input（）

有一个问题，当我想使用它时，三分之二的输入有一个未定义的值，但可以在模板文件中使用插值显示

.ts:

console.log（）

打印此文件：

0.623未定义
0.578未定义

模板文件：

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

感谢您的帮助

尝试替换此：

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

与：

---

能否将代码更改为以下内容：

export class NoteCanvasPageComponent {
  _canvasWidth: any;

  @Input() note: any;

  @Input() 
  set canvasWidth(value: any) {
      debugger;                     // <-- breakpoint 1
      this._canvasWidth = value;
  }

  @Input() canvasHeight: any;

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){
    debugger;          // <-- breakpoint 2
    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;
  }

}

导出类NoteCanvasPageComponent{
_画布宽度：任意；
@输入（）注：任意；
@输入（）
设置画布宽度（值：任意）{
调试器；//另一种解决方案可能是：

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

}

这增加了一个值，即每当note、canvasHeight或canvasWidth发生更改时，style.top和style.left将重新计算。
您确定在分配给note canvas页面时已设置canvasHeight和canvasWidth吗？您正在初始化变量canvasHeight和canvasWidth？？？@mver是的，我想我在中使用了这个变量父组件和值可以使用注释画布页面中的
{{{canvasHeight}}
来显示您缺少的“”大约
canvasheaight
，
canvashwidth
，
note
canvasheaight和Width不是note对象的属性。Debbuger说这个值没有定义，所以你是对的，分配给note canvas页面时输入还没有设置。但我仍然不明白为什么
{canvasheaight}
works然后看看我的第二个答案，这可能会解决您的问题。每当输入发生更改时，它将重新计算，即使在ngInit或ngAfetrViewInit{{{canvashheight}}工作之后也是如此，因为输入是在ngAfterViewInit已经执行之后设置的。任何时刻对输入的更改都将反映在{{canvashheight}}，但ngAfterViewInit只执行一次。如果此时尚未设置画布高度，则计算将不符合要求是的，它会进行一些更改！非常感谢您提供的解决方案和解释：）
    <div *ngFor="let note of arrayNotes">
      <note-canvas-page [canvasHeight]=note.canvasHeight [canvasWidth]=note.canvasWidth [note]=note *ngIf="note.display"></note-canvas-page>
    </div>

export class NoteCanvasPageComponent {
  _canvasWidth: any;

  @Input() note: any;

  @Input() 
  set canvasWidth(value: any) {
      debugger;                     // <-- breakpoint 1
      this._canvasWidth = value;
  }

  @Input() canvasHeight: any;

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){
    debugger;          // <-- breakpoint 2
    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;
  }

}

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

}