如何访问离子中的联系人列表答案

【问题标题】：how to access contact list in ionic如何访问离子中的联系人列表
【发布时间】：2020-11-04 19:24:12
【问题描述】：

我是 ionic 的初学者。我想在我的应用程序中访问联系人列表，只显示联系人。有人可以帮我解释一下如何访问联系人列表。我在 youtube 上观看教程，但此代码无效。我添加了这个插件。

ionic cordova plugin add cordova-plugin-camera

我的 home.ts 文件代码是..

import { Component } from '@angular/core';
import { Contact,IContactFindOptions,ContactFieldType} from '@ionicnative/contacts';
import { NavController } from '@ionic/angular';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
     ourtype:ContactFieldType[]=['displayName'];
     contactfound=[];
      constructor(private contacts:Contact,public navctrl:NavController) {
      this.search('');
      
      }
    
     search(q)
     {
       const option:IContactFindOptions= {
         filter:q
         }
    
         this.contacts.find(this.ourtype,option).then(cont =>
          {
            this.contactfound=cont;
          })
     }
    
     onKeyUp(ev)
     {
       this.search(ev.target.value);
     }
  
    }

我的html是这样的

<ion-header [translucent]="true">
  <ion-toolbar>
   
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
  <ion-navbar>
    <ion-searchbar (keyup)="onKeyUp($event)"></ion-searchbar>
  </ion-navbar>
  </ion-header>

  <ion-list>
    <ion-item *ngFor="let contact of contactfound">
<h2>{{contact?.displayName}}</h2>
<p *ngFor="let num of contact?.phoneNumbers">{{num.value}}</p>

    </ion-item>
  </ion-list>
</ion-content>

当我使用这些命令运行它时

离子cordova平台添加android
ionic cordova run android --aot

它显示空白屏幕

【问题讨论】：

应该是 ContactFieldType 不在 ts 文件顶部的导入列表中。
@francisconeto 先生，我忘了添加这个。但是它没有显示任何显示空白屏幕的内容，请您帮助我并解释此代码的工作原理。提前感谢罪恶

标签： angular cordova ionic-framework

【解决方案1】：

正如我在您的代码中看到的，您使用的是相机插件而不是联系人插件。

请使用联系人插件

https://ionicframework.com/docs/native/contacts

【讨论】：