Wsrtjtyk

Have spent several hours just to get this simple piece to work. Complex arrays are working fine, but dont understand why this simple code does not render data. Using nativescript 5.0

.ts file

public _contact: ObservableArray<string>;



    ngOnInit(): void {         



    }



    public pickContact()

    {

        Permissions.requestPermissions([android.Manifest.permission.GET_ACCOUNTS, android.Manifest.permission.WRITE_CONTACTS, android.Manifest.permission.READ_PHONE_STATE], "Access to google account required!")

        .then(() => {

            contacts.getContact().then(function(args){

                if (args.response === "selected") {

                    console.log("arg response selected .... ");

                    var _contact = args.data;

                    var name_given = _contact.name.given == null ? "" : _contact.name.given;

                    var name_middle = _contact.name.middle == null ? "" : _contact.name.middle;

                    var name_family = _contact.name.family == null ? "" : _contact.name.family;

                    var _contactName= name_given + " " + name_middle + " " + name_family;    

                    var _contactPhone = _contact.phoneNumbers[0].value;

                    alert("Data = " + _contactName + " " + _contactPhone);

                    this._contact = new ObservableArray([

                        {name:_contactName, phone:_contactPhone}

                    ]);  



                }

            })                

        });

    }

.html file

<StackLayout>

    <Button width="100" height="100" row="0" col="0" text="Refresh Calls" (tap)="pickContact()" horizontalAlignment="left" class="btn btn-rounded-sm m-20" style="background-color: rgb(60, 72, 179);color:white;font-weight:bold;"></Button>        

    <ListView [items]="_contact" height  = "270" class="list-group">            

            <ng-template let-result="item">

                <GridLayout rows="*,*" cols="" horizontalAlignment="left" verticalAlignment="top">

                    <Label row="0" col="0" [text]="result.name" class="h2 list-group-item lblThin" style="font-size:22;" (tap)="dialNumber(result.mobile)"></Label>

                    <Label row="1" col="0" [text]="result.phone" class="h4 list-group-item lblThin" (tap)="dialNumber(result.mobile)"></Label>                                                               

                </GridLayout>

            </ng-template>

        </ListView>

</StackLayout>

height in Listview is 270 (fixed value) as I expect only one record to be in this Listview. Contact selection will just pick one contact and its name & number will be displayed in the Listview. alert shows correct data, but no rendering of data in html.

In addition to above rendering issue, I want to know isthere any way to avoid button to call pickNumber function. I have tried navigatingTo, ngOnInit and noticed that they dont get executed.

There are a few things that are wrong about this code.

public _contact: ObservableArray<string>;



this._contact = new ObservableArray([

    {name:_contactName, phone:_contactPhone}

]);

/* { name: string, phone: string } is not of type 'string' */

Additionally, API callbacks that update UI elements typically like to be told which NgZone to operate within.

Then, to make matters a little muddier, you're using a disconnected function which technically shouldn't be able to reference any of your this members.

Try this:

class Contact: {

  constructor(public name: string, public phone: string) { }

}



@Component({ ... })

export class YourComponent {

  public contact$: Subject<Contact | null>;

  constructor(private zone: NgZone, ...) {

    this.contact$ = new BehaviourSubject<Contact | null>(null);

  }



  public pickContact() {

    Permissions. ...

      .then(() => {

        contacts.getContact().then((args) => {

          ...

          this.zone.run(() => {

            this.contact$.next(new Contact(contactName, contactPhone));

          }

        });

      });

  }

}

To improve this further, you'll probably want to use some WeakRefs in there to make sure you're not holding onto object references indefinitely (causing memory leaks) while waiting for API calls.