Angular中通过返回函数绑定服务变量到ngModel时出现解析错误

这个错误的核心原因是你误解了Angular双向绑定的语法规则——你不能把函数调用放在双向绑定的赋值侧。[(ngModel)]是语法糖，展开后是[ngModel]="值" (ngModelChange)="值=$event"，这里的左侧必须是一个可赋值的属性，而函数调用（比如getName()）只是返回一个值，无法直接被赋值，这才触发了模板解析报错。

下面给你两种可行的解决方案：

方案一：用组件中间属性做代理 #

在组件里定义一对getter和setter，把服务的变量和组件属性关联起来，这样就能正常使用双向绑定语法了：

服务代码示例 #

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

@Injectable({ providedIn: 'root' })
export class MyService {
  private _name = '初始名称';

  getName(): string {
    return this._name;
  }

  setName(newName: string): void {
    this._name = newName;
  }
}

组件代码修改 #

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'hello',
  template: `<input [(ngModel)]="name" placeholder="输入名称">`,
})
export class HelloComponent {
  constructor(private myService: MyService) {}

  // 通过getter获取服务中的变量值
  get name(): string {
    return this.myService.getName();
  }

  // 通过setter把新值同步回服务
  set name(newName: string) {
    this.myService.setName(newName);
  }
}

方案二：拆分双向绑定为单向绑定+事件绑定 #

如果你不想额外定义组件属性，可以把[(ngModel)]拆分成两部分：用单向绑定展示服务数据，用ngModelChange事件触发服务的更新方法：

组件模板修改 #

<input [ngModel]="myService.getName()" (ngModelChange)="myService.setName($event)" placeholder="输入名称">

这里[ngModel]负责从服务拉取数据展示在输入框，(ngModelChange)则把用户输入的新值传递给服务的setName方法，完成数据同步。

这两种方法都能解决你遇到的模板解析错误，同时实现组件输入框与服务变量的双向同步。

内容的提问来源于stack exchange，提问作者dindunuffin