Ngx-chips: EXCEPTION: Cannot read property 'toString' of undefined

[omprakash9]

Hi,

Getting an error when I upgraded ng2-tag-input from version 0.7.4 to 0.9.2 and ng2-material-dropdown from 0.6.9 to 0.7.4 Please find the attachment to see the full error. while I'm in the older versions it worked fine, but as soon as i upgraded the versions to latest one. it was throwing me an error EXCEPTION: Cannot read property 'toString' of undefined. Is there a solution otherthan downgrading the versions. Please let me know with your earliest suggestions. Thanks

versions that I'm using:
angular:2.4.5
ng2-tag-input: 0.7.4
ng2-material-dropdown: 0.6.4
angular-cli: 1.0.0-beta.28.3

broweser version: IE, version V11.0

[Gbuomprisco]

https://github.com/Gbuomprisco/ng2-tag-input/pull/242 should fix it thanks to @vadim82

[Gbuomprisco]

The fix should now be published!

[omprakash9]

Hi, upgraded ng2-tag-input and ng2-material-dropdown to the latest version. Still causing the same errors,
Please have a look at the attachment and suggest me. thanks

[Gbuomprisco]

Hi @omprakash9,

can you tell me what your autocomplete objects look like, and what you are defining (if you are) for the properties displayBy and identifyBy?

[omprakash9]

I'm defining the strings to both the properties
and my autocomplete oblects looks like:
{
"categories": [{
"displayValue": "fdsgfhf",
"itemId": 123.123,
"score": 0,
"confidence": "SAJHG",
"levelId": 1
}],
"totalPrimaryProductCount": 0,
"totalSecondaryProductCount": 0,
"vehicles": [{
"displayValue": "HOME",
"itemId": 01234,
"score": 10,
"confidence": "sfddgfr"
}],
"products": [{
"displayValue": "FLOWER",
"itemId": 123456,
"score": 1.2323,
}]
}

[Gbuomprisco]

and what is it you define for those? can you paste the html?

[omprakash9]

HTML:

name="tokens"
[identifyBy]="'itemId'"
[displayBy]="'displayValue'"
[onlyFromAutocomplete]="true"
(onAdd)="onItemAdded($event)"
#input>

[Gbuomprisco]

If you are using those objects for the autocomplete, you need to redefine them in <tag-input-dropdown>

[omprakash9]

I have followed this example of yours:

[onlyFromAutocomplete]="true">
[autocompleteItems]="['iTem1', 'item2', 'item3']">

[Gbuomprisco]

In that example I use strings :) with strings, it's not needed to specify any key

[omprakash9]

`HTML: I'm not sure whether you could able view my complete html, i;m pasting again my whole html code where i defined my properties in tag-input. do you want me to add the properties in tag-input-dropdown as well. If yes, please let me know what exactly you want me to do :)

name="tokens"
[identifyBy]="'itemId'"
[displayBy]="'displayValue'"
[onlyFromAutocomplete]="true"
(onAdd)="onItemAdded($event)"
#input>

`

[Gbuomprisco]

tag-input-dropdown, just like tag-input, needs to have its displayBy and identifyBy properties definted. What will be the AutocompleteItem observable return? An object like the ones above? In that case, define in tag-input-dropdown the same properties displayBy and identifyBy that you defined in its parent. They are the same props, but one works for one component, and the other for another one.

see https://github.com/Gbuomprisco/ng2-tag-input/blob/master/demo/home/home.html#L67

[omprakash9]

@Gbuomprisco

Thankyou, its working!

But, the css are now disabled for the dropdown(dropdown is showing up with default styles). The previous styles are no longer applying for this new changes, though I decleared the previous styles in global level file itself.

[Gbuomprisco]

@omprakash9 cool!

The dropdown uses emulated shadow dom, your styles won't be able to work