I cant figure this out. Would love someone to have a look and identify why this causes an error.
I have an address custom element that forms part of the client form. It gets its data from the client form (parent) via double bound variable. I set it like so:
@bindable({ defaultBindingMode: bindingMode.twoWay }) address = new AddressDetails;
The client gets its data from a fetch which is a promise.
This does work and if address details exist on the client they populate in the address custom element.
However if I want to set one of the members of the address to some value I get and error in that no matter where I try it cannot set the value to something that is undefined.
I have initiated it. each member is set to a textbox in the form and populates when there is data for it present in the parent (client).
However, I get the following error if I try and set say the postcode (this.address.postcode) to a value. It should be able to be assignable. Its not. It remains (for all purposes) undefined.
Here is how I tried to use it:
this.address.addressLocation.stateShortName = this.companyStateShortName;
and here is the error:
address.ts:72 Uncaught (in promise) TypeError: Cannot set property 'stateShortName' of undefined
at address.ts:72
at <anonymous>
So I thought I might be able to find somewhere where its not undefined… I couldnt. Here is a picture of the console with a number of console.logs of this.address. One during the constructor, bind and attached all showing its undefined.
For those that would like all the details of the error in is the expanded view I have attached it below.
So why when I have initialised the variable object address cant I access it and assign anything to it??
Is this something to do with Aurelia not allowing you to access double bound variables or (more likely) I have screwed up…
address.ts:72 Uncaught (in promise) TypeError: Cannot set property 'stateShortName' of undefined
at address.ts:72
at<anonymous>
(anonymous) @ address.ts: 72
Promise.then(async)
app / components / clients / address / address.Address.getStateData @ address.ts: 66
Address @ address.ts: 24
invoke @ aurelia-dependency - injection.js:436
invoke @ aurelia-dependency - injection.js:400
invoke @ aurelia-dependency - injection.js:671
get @ aurelia-templating.js:2002
get @ aurelia-dependency - injection.js:610
elementContainerGet @ aurelia-templating.js:2057
create @ aurelia-templating.js:4044
applyInstructions @ aurelia-templating.js:2159
create @ aurelia-templating.js:2380
create @ aurelia-templating.js:4056
(anonymous) @ router-view.js:127
Promise.then(async)
process @ router-view.js:118
_loop @ aurelia-router.js:291
_commitChanges @ aurelia-router.js:305
run @ aurelia-router.js:143
next @ aurelia-router.js:112
iterate @ aurelia-router.js:1302
inspect @ aurelia-router.js:1279
(anonymous) @ aurelia-router.js:1295
processPotential @ aurelia-router.js:1413
iterate @ aurelia-router.js:1294
processActivatable @ aurelia-router.js:1305
run @ aurelia-router.js:1191
next @ aurelia-router.js:112
iterate @ aurelia-router.js:1221
processDeactivatable @ aurelia-router.js:1224
run @ aurelia-router.js:1179
next @ aurelia-router.js:112
iterate @ aurelia-router.js:1302
processActivatable @ aurelia-router.js:1305
run @ aurelia-router.js:1167
next @ aurelia-router.js:112
(anonymous) @ app.ts: 55
Promise.then(async)
app / app / app.AuthorizeStep.run @ app.ts: 55
next @ aurelia-router.js:112
Promise.then(async)
run @ aurelia-router.js:1443
next @ aurelia-router.js:112
iterate @ aurelia-router.js:1221
processDeactivatable @ aurelia-router.js:1224
run @ aurelia-router.js:1155
next @ aurelia-router.js:112
(anonymous) @ aurelia-router.js:584
Promise.then(async)
run @ aurelia-router.js:582
next @ aurelia-router.js:112
run @ aurelia-router.js:125
(anonymous) @ aurelia-router.js:1773
Promise.then(async)
_dequeueInstruction @ aurelia-router.js:1727
activate @ aurelia-router.js:1704
(anonymous) @ aurelia-router.js:1682
Promise.then(async)
registerViewPort @ aurelia-router.js:1681
RouterView @ router-view.js:74
invokeWithDynamicDependencies @ aurelia-dependency - injection.js:425
invoke @ aurelia-dependency - injection.js:400
invoke @ aurelia-dependency - injection.js:671
get @ aurelia-templating.js:2002
get @ aurelia-dependency - injection.js:610
elementContainerGet @ aurelia-templating.js:2057
create @ aurelia-templating.js:4044
applyInstructions @ aurelia-templating.js:2159
create @ aurelia-templating.js:2380
create @ aurelia-templating.js:4056
(anonymous) @ aurelia-templating.js:4548
Promise.then(async)
createController @ aurelia-templating.js:4547
_createControllerAndSwap @ aurelia-templating.js:4509
compose @ aurelia-templating.js:4595
compose @ aurelia-templating.js:4859
setRoot @ aurelia-framework.js:111
(anonymous) @ boot.ts: 59
Promise.then(async)
configure @ boot.ts: 42
(anonymous) @ aurelia-bootstrapper.js:124
Promise.then(async)
config @ aurelia-bootstrapper.js:119
(anonymous) @ aurelia-bootstrapper.js:155
Promise.then(async)
bootstrap @ aurelia-bootstrapper.js:154
(anonymous) @ aurelia-bootstrapper.js:141
Promise.then(async)
run @ aurelia-bootstrapper.js:136
(anonymous) @ aurelia-bootstrapper.js:161
94 @ app.js?v = orlKrQ6pvzX…alvdD91XqhvWs: 23925
__webpack_require__ @ bootstrap 13a3cb9…:678
fn @ bootstrap 13a3cb9…:88
50 @ app.js?v = orlKrQ6pvzX…alvdD91XqhvWs: 18888
__webpack_require__ @ bootstrap 13a3cb9…:678
0.Object.defineProperty.value @ bootstrap 13a3cb9…:724
(anonymous) @ bootstrap 13a3cb9…:724