0

I got the error bellow on trying to populate a RadAutoCompleteTextView. Any hint in regard?

Many thanks in advance

@ViewChild("rankingsCtrl", { static: false }) rankingsCtrl: RadAutoCompleteTextViewComponent;


this.rankingsCtrl.autoCompleteTextView.insertTokenAtIndex(new TokenModel("Test",""), 0);


JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'addTokenModelAt' of undefined
JS: TypeError: Cannot read property 'addTokenModelAt' of undefined
JS:     at RadAutoCompleteTextView.push.../node_modules/nativescript-ui-autocomplete/ui-autocomplete.js.RadAutoCompleteTextView.insertTokenAtIndex (file:///node_modules/nativescript-ui-autocomplete/ui-autocomplete.js:589:0)
8
  • 1
    When exactly you are calling insertTokenAtIndex?
    – Manoj
    Commented Dec 4, 2019 at 19:36
  • Please find below the missing parts of the puzzle: this.rankingDaoService.findRankingsByPlayerId(this.idPlayer).then( val => { for (let i = 0; i < val.length; i++) { this.rankingsCtrl.autoCompleteTextView.insertTokenAtIndex(new TokenModel("Just Test",""), 0); } } );
    – ittradco
    Commented Dec 5, 2019 at 10:25
  • And the UI XML part: <StackLayout class="input-field"> <RadAutoCompleteTextView #rankingsCtrl [items]="dataItems" completionMode="Contains" layoutMode="Horizontal" displayMode="Tokens"> <SuggestionView > <ng-template let-item="item"> <StackLayout > <Label [text]="item.text" class="ranking-label"></Label> </StackLayout> </ng-template> </SuggestionView> </RadAutoCompleteTextView> </StackLayout>
    – ittradco
    Commented Dec 5, 2019 at 10:29
  • Still not what I was looking for. Need to know where exactly this code is called in your component. May be in onInit or click of a button like that...
    – Manoj
    Commented Dec 5, 2019 at 10:31
  • 1
    Try calling it in loaded event of the rad auto complete text view itself.
    – Manoj
    Commented Dec 5, 2019 at 10:38

1 Answer 1

1

It's not recommended to access an element or it's methods upon ngOnInit as it's not guaranteed the underlaying nativeElement is created.

Try to use loaded event of the component which ensures the elements are created. A timeout may work but I wouldn't suggest it as it's not guaranteed all the time.

If you like to access multiple elements, then waiting for parent view's loaded event should be enough, all child elements should be created and ready for use by then.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.