我在使用 @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>
谢谢你的帮助
最佳答案
另一种解决方案可能是:
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 将被重新计算。
关于javascript - Ionic - Angular - 组件的三个输入中有两个具有未定义的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51262585/