2017-02-09 65 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等等。