Связывание служебной переменной в компоненте через функции возврата

Question

Я хочу привязать служебную переменную с помощью ngModel (двухстороннее связывание) к входу компонента. Поэтому я использую простые функции возврата для возврата служебной переменной (это необходимо для получения правильной переменной из службы).

Но если я хочу запустить этот код, я получаю следующую ошибку:

Template parse errors:
Parser Error: Unexpected token '=' at column 10 in [getName()=$event] in ng:///AppModule/HelloComponent.html@2:9 ("
{{nameService.name}}

Здравствуйте, в моем случае это более сложный пример. Чтобы упростить это, я сделал следующий пример и демонстрацию: https://stackblitz.com/edit/angular-hwgoux?file=src%2Fapp%2Fhello.component.ts

Услуги:

import { Injectable } from '@angular/core';

@Injectable()
export class NameService {
  name:string="Hello World!";
  constructor() { }
  getName(){return this.name};
}

Компонент:

import { Component, Input } from '@angular/core';
import { NameService} from './name.service';

@Component({
  selector: 'hello',
  template: `
  {{nameService.name}}
  <input [(ngModel)]="getName()">`
})
export class HelloComponent  {
  @Input() name: string;
  constructor(private nameService:NameService){
  }
  getName(){
    return this.nameService.getName();
  }
}

Answer 1

Измените свой шаблон для обработки двусторонней привязки данных следующим образом:

<input [ngModel]=getName() (ngModelChange)="setName($event)">

Где setName - установщик для вашей служебной переменной.

Я раздвоил ваш стекпоказать упрощенный пример того, чего вы хотите достичь: Демо