Nativescript ListPicker breaks strings into individual characters

Issue

I’m trying to use Nativescript’s ListPicker to collect data in my ios/android application. I’m running into a problem where instead of showing each individual string or number, it breaks everything down into individual characters.

For example, I want to give a user an option between Left or Right, but instead of having two options for left and right, the list picker shows each character. Click here for the image of this

I have the same problem when trying to show a list of numbers using the list picker, as it breaks numbers up into individual characters and adds the commas from the array in-between. I’m trying to allow a user to select a height here. Click here for the image of this

I’m using native script-angular.

Here’s the code:

Html file:

<ListPicker items="{{ sides }}" ></ListPicker>
 <StackLayout orientation="horizontal">
            <ListPicker items="{{ feet }}" ></ListPicker>
            <ListPicker items="{{ inches }}" ></ListPicker>
 </StackLayout>

TypeScript File:

sides = ["Left", "Right"];
feet = [1, 2, 3, 4, 5, 6, 7];
inches = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

I’ve never used the ListPicker before so I could be using it incorrectly but based on my research, this execution should work fine. If anyone has a fix I’d appreciate it!

Solution

Found the answer – in the Html file, instead of formatting the tag as I did, use this format:

<ListPicker [items]="sides" ></ListPicker>

The square brackets on items and no curly brackets on what you want to put in the listpicker apparently are all the difference

Answered By – Henry Geller

Answer Checked By – Senaida (AngularFixing Volunteer)