正在获取联系人displayName和phoneNumbers

Question

我使用本机ionic联系人从手机获取联系人列表

.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]如何做到这一点？？此外，我希望在列表的左侧有一个字母，其中is代表以该字母开头的联系人组的第一个字母(例如，a列表组，然后滚动B列表组)。。。。如果有人能对此提供一个见解，那就太好了。乙醇

Answer 1

我已经解决了如下问题：

.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>

Answer 2

我在列表中显示带号码的搜索联系人时遇到了同样的问题。试着用这个编辑你的第一篇文章。

.html

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

显然，这种方法只显示每个联系人的一个号码。对于多个号码，只需添加另一项。phoneNumber[1].value，依此类推。