компонент не получает переменную @Input ()

Question

Я пытаюсь создать компонент редактирования встроенного ввода.

Он загружается правильно, но похоже, что @Input() переменные всегда не определены.

mypage. 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 itпоказывает неопределенное.

Я что-то не так делаю?

Answer 1

Привязка к строке вместо переменной myname (которая будет существовать в mypage.ts)

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