typescript - TypeError: Không thể đọc thuộc tính 'state' của undefined tại Object.eval - Đối tượng Service không thể liên kết với ngModel trong Angular 5

Tôi có một đối tượng được khai báo trong dịch vụ của mình:

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

Tôi cần gán các đối tượng vào một hộp nhập liệu. Đây là những gì tôi có thể làm

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

Đây là những gì Tôi không thể làm

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

Tôi có thể liên kết nếu đối tượng được khai báo trong thành phần của tôi. Nhưng tôi không thể liên kết với một đối tượng dịch vụ. Đây là chi tiết lỗi:

LỖI TypeError: Không thể đọc thuộc tính 'state' của undefined tại Object.eval [như updateDirectives]

Câu trả lời #1

Lưu ý: không nên liên kết dữ liệu trực tiếp từ đối tượng dịch vụ, bạn nên lấy dữ liệu từ dịch vụ và lưu vào biến cục bộ của thành phần để thực hiện công việc trên đó. Một ví dụ:

component.ts:

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

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

html của thành phần sau đó:

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

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

Mã dịch vụ không có thay đổi.

Dưới đây là phiên bản đã được thử nghiệm và hoạt động tại phía tôi.

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>

Có vấn đề là bạn đã sử dụng this, nó nên là

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

để điều này hoạt động serviceObj cần phải là public để nó hoạt động