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">

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

错误类型错误：无法读取未定义的属性“状态” 在Object.eval [as updateDirectives]

Answer 1

注意：建议不要直接从服务对象绑定数据，最好从服务获取数据并将其存储在本地变量中，然后对其进行操作，例如

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，这样才能正常工作

服务对象无法绑定到Angular 5中的ngModel

1 个答案: