2017-02-09 67 views
0

我使用本机用于获取来自手机获取联系人显示名称和PHONENUMBERS

.TS联系人列表中的联系人离子:

import { Contacts } from 'ionic-native'; 
    ///////// 
export class ContactPage { 
    contactsfound = [] 

constructor(public navCtrl: NavController) { 
    Contacts.find(["displayName", "phoneNumbers"], {multiple: true}).then((contacts) => { 
    this.contactsfound = contacts; 
    }) 
    } 
} 

的.html:

<ion-content> 
    <ion-list> 
    <ion-list-header>Follow us on Twitter</ion-list-header> 
    <ion-item *ngFor="let item of contactsfound"> 
     {{ item.displayName }} 
     <p>{{ item.phoneNumbers }}</p> 
    </ion-item> 
    </ion-list> 
</ion-content> 

我收到清单displayName正确但是为phoneNumbers我得到[object Object] 如何做到这一点? 此外,我想在列表的左侧有一个字母,其中代表以该字母开头的一组联系人的第一个字母(例如,列表组,然后滚动B列表组)。如果有人提供关于这方面的见解,那就太棒感谢名单

+0

尝试在控制台中打印对象并进行调试:'console.log(JSON.stringify(contactsfound))'。 phoneNumbers属性显然是一个对象,而不是一个数字/字符串值 –

+0

@suraj ...我不能在控制台中打印,这个插件只适用于真正的设备...是的,它是一个对象,而displayName是字符串...它似乎'phoneNumbers'是所有联系人电话号码的数组......所以如何访问它们并相应地显示它们 – Yasir

+1

您仍然可以使用Chrome开发人员工具查看控制台日志.. https://developers.google.com/web/工具/ chrome-devtools/remote-debugging/ –

回答

0

我必须解决的问题如下:

.TS:

import { Contacts } from 'ionic-native'; 
///////// 
export class ContactPage { 
contacts = [] 
groupedContacts = [] 

constructor(public navCtrl: NavController) { 
    Contacts.find(["displayName", "phoneNumbers"], {multiple: true, hasPhoneNumber: true}).then((contacts) => { 

    for (var i=0 ; i < contacts.length; i++){ 
    if(contacts[i].displayName !== null){ 
     var obj = {}; 
     obj["name"] = contacts[i].displayName; 
     obj["number"] = contacts[i].phoneNumbers[0].value; 
     this.contacts.push(obj) // adding in separate array with keys: name, number 
    }  
    } 

    this.groupContacts(this.contacts); 
    }) 
} 

groupContacts(contacts){ 

    let sortedContacts = contacts.sort(function(a, b){ 
    if(a.name < b.name) return -1; 
    if(a.name > b.name) return 1; 
    return 0; 
    }); 

    let currentLetter = false; 
    let currentContacts = []; 

    sortedContacts.forEach((value, index) => { 
    if(value.name.charAt(0) != currentLetter){ 
     currentLetter = value.name.charAt(0); 

     let newGroup ={ 
     letter: currentLetter, 
     contacts:[] 
     }; 

     currentContacts = newGroup.contacts; 
     this.groupedContacts.push(newGroup); 
    } 
    currentContacts.push(value); 
    }); 
} 

的.html:

<ion-content> 
    <ion-item-group *ngFor="let group of groupedContacts"> 
    <ion-item-divider color="light">{{group.letter}}</ion-item-divider> 
    <ion-item *ngFor="let contact of group.contacts" class="contactlist"> 
     {{contact.name}} 
     <p>{{contact.number}}</p> 
    </ion-item> 
    </ion-item-group> 

+0

上面的解决方案不能使用最新的离子本地联系人插件可以有人帮我出来请。 –

0

显示所搜索的时候我也遇到了同样的问题与列表中的数字联系。试着用这个编辑你的第一篇文章。

的.html

<ion-item *ngFor="let item of contactsfound"> 
    {{ item.displayName }} 
    <p>{{ item.phoneNumber[0].value }}</p> 
</ion-item> 

显然,此方法只示出了每一个接触的一个数字。对于多个号码,只需添加另一个item.phoneNumber [1] .value等等。