feat(list-picker): add textField, valueField and selectedValue properties

[sebawita]

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/DevelopmentWorkflow.md#running-unit-tests.
• Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/WritingUnitTests.md.

What is the current behavior?

Currently if we pass and array of json objects to a listview, there is no simple way to make it display a specific field from each item.
Also, we can only get the selectedIndex, but there is no direct way to get the selected object, or even specify which property should be returned.

What is the new behavior?

Implements #1677

Adds new properties to the ListView component (textField and valueField - should be used with arrays of JSON objects):

• textField - tells the listview which property should be used to display each item
• valueField - tells the listview, which property should be used to update the selectedValue
• selectedValue - is the property that will contain the selectedValue, if valueField is specified, then it will contain the value from that property, otherwise it will contain the whole selected item

Breaking changes

No breaking changes.

Demo app

I've added a sample in apps -> list-picker -> list-picker-json-array

[ns-bot]

Please sign CLA at http://www.nativescript.org/cla

[ns-bot]

CLA signature found, happy contributing!

[sebawita]

An example of using the new properties:

<ListPicker items="{{ items }}"
  textField="name"
  valueField="role"
  selectedIndex="2"
  selectedValue="{{ selectedItem }}">
</ListPicker>

[larssn]

It's unclear how selectedValue translates to Angular. How do you databind it there?

I've tried various ways:

(selectedValue)="selected = $event"
[selectedValue]="myObj?.field"

Doesnt seem to do anything.

Another thing. Binding the component via reactive forms will still bind just the index, and not the valueField:
<ListPicker formControlName="printerUid" ...></ListPicker> (This will bind 0,1,2 etc. to the field printerUid)

[xxj2016]

When is Angular coming next?

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.