类型错误：无法在 Object.eval 中读取未定义的属性“状态”-服务对象无法绑定到 Angular 5 中的 ngModel

Question

我在我的服务中声明了一个对象：

public caseDetails = {
partyId: '',
address: {
      state: '',
      city: '',
      zip: '',
      street: ''
    }
}

我需要将对象绑定到输入框。 这是我能做的

<input type="text" [(ngModel)]="this.serviceObj.caseDetails.partyId">

这是我不能做的

<input type="text" [(ngModel)]="this.serviceObj.caseDetails.address.state">

如果在我的组件中声明了对象，我可以绑定。 但我无法绑定到服务对象。 这是错误的详细信息：

错误 TypeError：无法读取 Object.eval 处未定义的属性“状态”[作为 updateDirectives]

Answer 1

注意：不推荐直接从服务对象绑定数据的方法，最好从服务获取数据并将其存储在局部变量中到组件并对其进行处理。 一个例子：

组件.ts ：

export class abcComponent implements OnInit {
 datafromService:any;
 constructor(
    public service: DataService
  ) { }

  ngOnInit() {
   this.datafromService = service.caseDetails; 
  }
}

组件的 html 然后：

{{datafromService|json}}
{{datafromService.address.state|json}}

   <form>
       <input name='test' type="text" 
        [(ngModel)]="datafromService.address.state">
   </form>

服务代码没有变化。

---

下面是在我这边尝试和测试的工作。

服务.ts ：

 @Injectable()
 export class DataService {

  public caseDetails = {
    partyId: '',
    address: {
      state: 'mystate',
      city: '',
      zip: '',
      street: ''
    }
  }
}

组件.ts ：

@Component({
  selector: 'abc',
  templateUrl: 'abc.component.html'
})
export class abcComponent {
 constructor(
    public service: DataService
  ) { }
}

组件.html ：

{{service.caseDetails|json}}
{{service.caseDetails.address.state|json}}

   <form>
       <input name='test' type="text" 
        [(ngModel)]="deskService.caseDetails.address.state">
   </form>

---

你用this有问题，应该是

<input type="text" [(ngModel)]="serviceObj.caseDetails.address.state">

为此， serviceObj需要public才能正常工作