从联系人获取所有号码的离子联系人问题

Question

希望你一切都好

Ionic Contacts 有问题。

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

代码：

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

<ion-button (click)="loadContacts()" expand="full"
          >Load Contacts</ion-button
        >
        <ion-list *ngFor="let c of myContacts">
          <ion-item>
            <ion-label
              >{{c.name.givenName}} {{c.name.familyName}}
              <p>
                {{c.phoneNumbers[ 0 ].value}}
              </p>
            </ion-label>
          </ion-item>
        </ion-list>

非常感谢。

Answer 1

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]
    }
  ];
}

其他情况：现在我得到了联系人的姓名和所有 phone，这很好，但是如果联系人有 2-3-4 phone 个号码，我想单独显示它们，例如在列表中是 John Doe 的第一个 phone 号码，然后是 John Doe 的第二个 phone 号码和 John Doe 之后的第三个 phone 号码等等，因为我想在之后将它们添加到清单中，这样我就可以选择我要的号码 select

您可以这样做，只需调整离子复选框： 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>

从联系人获取所有号码的离子联系人问题

Ionic Contacts problem getting all numbers from a contact

angular

typescript

ionic-framework

native

contacts