Ionic Native Contacts问题显示每个数字

Question

我希望你身体健康。

我对离子触点有问题。

我现在正在用我的代码获取所有联系人，但我需要提取每个联系人和每个号码。例如，如果John Doe有3个电话号码，我想在前端显示John Doe的第一个电话号码、John Doe和第二个电话号码以及John Doe第三个号码。

代码：

loadContacts() {
let options = {
filter: "",
multiple: true,
hasPhoneNumber: true,
};
this.contacts.find(["*"], options).then((contacts: Contact[]) => {
this.myContacts = contacts;
console.log("Contacts:", contacts);
});
}

<ion-list
lines="none"
*ngFor="let c of myContacts"
class="ion-no-padding"
>
<ion-item class="ion-no-padding" (ionChange)="onCheckbox($event)">
<h5>{{c.name.givenName}} {{c.name.familyName}}</h5>
</ion-item>
<p *ngFor="let p of c.phoneNumbers" class="phone">
{{p.value}} </p
</ion-list>

The array of objects is looking like this : 
testContact = {
_objectInstance: {
id: 3,
rawId: null,
displayName: null,
name: {
givenName: "John",
honorificSuffix: "",
formatted: "John Appleseed",
middleName: "",
familyName: "Appleseed",
honorificPrefix: "",
},
nickname: "",
phoneNumbers: [
{ value: "888-555-5512", pref: false, id: 0, type: "mobile" },
{ value: "888-555-1212", pref: false, id: 1, type: "home" },
],
emails: [
{ value: "[e-mail]", pref: false, id: 0, type: "work" },
],
addresses: [
{
pref: "false",
locality: "Atlanta",
region: "GA",
id: 0,
postalCode: "30303",
country: "USA",
type: "work",
streetAddress: "3494 Kuhl Avenue",
},
{
pref: "false",
locality: "Atlanta",
region: "GA",
id: 1,
postalCode: "30303",
country: "USA",
type: "home",
streetAddress: "1234 Laurel Street",
},
],
ims: null,
organizations: [
{ pref: "false", title: "", name: "", department: "", type: null },
],
birthday: "1980-06-22T12:00:00.000Z",
note: null,
photos: null,
categories: null,
urls: null,
},
rawId: null,
};

现在，我得到了所有联系人和所有购买的手机，我需要显示每个联系人和每个电话号码，如上所述。

非常感谢。

Answer 1

您可以使用内部for循环来完成此操作，该循环通过每个联系人的电话号码进行迭代。

<ion-list lines="none" *ngFor="let c of myContacts" class="ion-no-padding">
<div *ngFor="let p of c.phoneNumbers"
<ion-item class="ion-no-padding" (ionChange)="onCheckbox($event)">
<h5>{{c.name.givenName}} {{c.name.familyName}}</h5>
</ion-item>
<p class="phone">
{{p.value}} </p
</ion-list>

您可以从这里看到一个使用angular的工作示例：https://stackblitz.com/edit/angular-ivy-prfpsb?file=src/app/app.component.ts