组件未接收 @Input() 变量

Question

我正在尝试创建一个内联输入编辑组件。

它正在正确加载，但看起来@Input()变量始终未定义。

我的页面.html

...
<app-inputinline
[name]="username"
[fieldValue]="myname"
[isRequired]="true"
(updateValue)="saveField('username', $event)"></app-inputinline>
...

inputinline.component.ts

import { Component, OnInit } from '@angular/core';
import { Input, EventEmitter, Output, ViewChild, Renderer } from '@angular/core';
@Component({
selector: 'app-inputinline',
templateUrl: './inputinline.component.html',
styleUrls: ['./inputinline.component.scss'],
})
export class InputinlineComponent implements OnInit {
@Input() name:string;
@Input() fieldValue:string;
@Input() isRequired:string;
@Input() minLength:string;
@Input() maxLength:string;
@Output() updateValue: EventEmitter<any> = new EventEmitter();
@ViewChild('container') container;
public value:any;
public isEditView:boolean = false;
public docEditUnlisten:any;
constructor(
private renderer:Renderer
) { }
ngOnInit(){
console.log(this.fieldValue);      <============ THIS SHOWS UNDEFINED
}
showEditable()
{
this.value = this.fieldValue;
this.isEditView = true;
this.docEditUnlisten = this.renderer.listenGlobal('document', 'click', (event) => {
if(!this.container.nativeElement.contains(event.target)){
this.showDetail();
}
});
}
save(){
this.updateValue.emit(this.value);
}
showDetail(){
this.isEditView = false;
}
}

inputinline.component.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { InputinlineComponent } from './inputinline.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
],
declarations: [
InputinlineComponent
],
exports: [
InputinlineComponent
],
entryComponents: [
],
})
export class InputinlineComponentModule {
}

inputinline.component.html

...
<span class="editable-click">
=> {{fieldValue}}
<div #container class="editable-container editable-inline">
...

如您所见，我正在尝试显示=> {{fieldValue}}，但它是空的，并且在组件ngOnInit中也显示未定义。

我做错了什么吗？

Answer 1

绑定到字符串而不是变量myname(这将存在于mypage.ts中(

<app-inputinline
[name]="username"
[fieldValue]="'myname'"
[isRequired]="true"
(updateValue)="saveField('username', $event)"></app-inputinline>