angular - TypeError : Cannot read property 'state' of undefined at Object. eval - 服务对象无法绑定(bind)到 Angular 5 中的 ngModel

Question

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

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

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

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

这是我不能做的

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

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

ERROR TypeError: Cannot read property 'state' of undefined at Object.eval [as updateDirectives]

Answer 1

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

component.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>

服务代码没有变化。

---

以下是在我这边经过试验和测试的工作。

service.ts:

 @Injectable()
 export class DataService {

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

component.ts:

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

component.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，这样它才能工作