Ionic Contacts问题从联系人获取所有号码

问题描述

我希望你一切都好。

我对离子触点有疑问。

我现在正在使用代码获取所有联系人，但是我需要提取联系人拥有的所有电话号码。例如，如果约翰有3个电话号码，我想在列表中显示它们，现在我只能显示1个。我该如何实现？

代码：

Error: JavaFX runtime components are missing,and are required to run this application

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

非常感谢。

解决方法

Live example
我准备了一个演示来显示模板中的多个联系人：
在这里，我不关注联系人模型。您可以根据需要调整联系模型。

模板：

<hello name="{{ name }}"></hello>
<p>
    Start editing to see some magic happen :)
</p>

<!-- <ion-button (click)="loadContacts()" expand="full">Load Contacts</ion-button> -->

<ion-list *ngFor="let c of myContacts">
    <ion-item>
        <ion-label>{{c.givenName}} {{c.familyName}}
            <p>
                {{c.phoneNumbers}}
            </p>
        </ion-label>
    <hr>
    </ion-item>
</ion-list>
<hr><hr>
<h3>Do you want to break the contacts more?</h3>

<ion-list *ngFor="let c of myContacts">
    <ion-item>
        <ion-label>{{c.givenName}} {{c.familyName}}
            <p *ngFor="let p of c.phoneNumbers">
                {{p}}
            </p>
        </ion-label>
    <hr>
    </ion-item>
</ion-list>

组件：

import { Component,VERSION } from "@angular/core";

export interface Contact {
  givenName: String;
  familyName: String;
  phoneNumbers: Array<Number>;
}

@Component({
  selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  myContacts: Contact[] = [
    {
      givenName: "X",familyName: "FX",phoneNumbers: [1111111,2222222,333333]
    },{
      givenName: "Y",familyName: "FY",phoneNumbers: [44444,5555,6666]
    },{
      givenName: "Z",familyName: "FZ",phoneNumbers: [77777,8888,9999]
    }
  ];
}

其他方案： 现在，我得到联系人的姓名和所有电话，这很好，但是如果联系人有2-3-4个电话号码，我想分别显示它们，例如，清单中的第一位是John Doe电话号码，然后是第二个电话号码的John Doe，然后是第三个电话号码的John Doe，依此类推，因为我想在之后将它们添加到清单中，所以我可以选择要选择的号码

您可以这样做，只需调整离子复选框即可： Live Example 2

<h3>Do you want to break the contacts more?</h3>

<ion-list *ngFor="let c of myContacts">
    <ion-item>
        <div *ngFor="let p of c.phoneNumbers">
            <ion-label>Name: {{c.givenName}} {{c.familyName}}
        </ion-label><br>
    <ion-checkbox checked>Phone Number: {{p}}</ion-checkbox>
    <br><br>
        </div>
        <hr>
    </ion-item>
</ion-list>