サービスでオブジェクトが宣言されています：
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で未定義のプロパティ 'state'を読み取ることができません[updateDirectivesとして]
注：サービスオブジェクトからデータを直接バインドする方法はお勧めしません。サービスからデータを取得し、ローカル変数にコンポーネントに格納して、それを処理することをお勧めします。例：
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、それが機能するようにする必要があります
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加