類型錯誤：無法在 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才能正常工作