ionic 2 本机联系人插件查找不退出

Question

我正在尝试使用 ionic 2 native 查询所有联系人。运行 ionic serve 命令时出现以下错误。如果有人知道请告诉我，我该如何解决这个问题。谢谢

Typescript Error
Property 'find' does not exist on type 'typeof Contacts'.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
  testFun(){
    Contacts.find(['*']).then((contacts)=>{
      alert(JSON.stringify(contacts[0]));
    })
  }
}

home.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Blank
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button full (click)="testFun()">Get Contacts</button>
</ion-content>

错误图片

源代码Git repo for my project

Answer 1

从 Ionic 3.x.x 开始，您使用 Native 插件的方式与 Ionic 2.x.x

略有不同

首先你需要在构造函数中添加Contact
您需要在您的@Component

Contact

因此您的 home.ts 应该如下所示：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Contacts, Contact, ContactField, ContactName } from '@ionic-native/contacts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Contacts]
})
export class HomePage {

  constructor(public navCtrl: NavController, private contacts: Contacts) {

  }

  testFun(){
    this.contacts.find(['*']).then((contacts)=>{
      alert(JSON.stringify(contacts[0]));
    })
  }
}

更多用法示例在此处查看 Ionic 3.x NATIVE 文档的官方文档 http://ionicframework.com/docs/native/contacts/

Answer 2

你试过吗？

Contacts.prototype.find(['*'])
            .then((contacts)=>{
                alert(JSON.stringify(contacts[0]));
            })
            .catch((err) => {
                alert('Error ' + err);
});

Answer 3

import { Component } from '@angular/core';
import { NavController, LoadingController, Platform } from 'ionic-angular';
import { SMS } from 'ionic-native';
import { Storage } from '@ionic/storage';

declare var navigator : any;

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  isContactAccessConfirmed: boolean = false;
  isFetching: boolean = false;
  isInit: boolean = false;
  contacts: Array<any> = [];
  groupedContacts: Array<any> = [];
  constructor(public navCtrl: NavController, public loadingCtrl: LoadingController, public platform: Platform, public storage: Storage) {
    this.storage.get('isContactAccessConfirmed').then((val) => {
      this.isContactAccessConfirmed = val;
      this.isInit = true;
      if (this.isContactAccessConfirmed) {
        this.fetchContacts(null);
      }
    })
  }

  dismiss() {
    this.navCtrl.pop();
  }

  confirm() {
    let that = this;
    this.fetchContacts(function() {
      that.isContactAccessConfirmed = true;
      that.storage.set('isContactAccessConfirmed', true);
    });
  }

  invite(contact: any) {
    if (contact.invited) {
      return;
    }
    SMS.send(contact.number, 'Hey, come join me on my app! You can download it at: ...', {
      android : {
        intent: 'INTENT'
      }
    }).then(function() {
      contact.invited = true;
    }, function(error) {
      console.log(error);
    });
  }

  fetchContacts(cb) {
    let loader = this.loadingCtrl.create({content: "Retrieving contacts..."});
    this.platform.ready().then((readySource) => {
      loader.present();
      this.isFetching = true;
      let that = this;
      navigator.contactsPhoneNumbers.list(function(contacts) {
        console.log(contacts.length + ' contacts found');
        for(var i = 0; i < contacts.length; i++) {
           console.log(contacts[i].id + " - " + contacts[i].displayName);
           for(var j = 0; j < contacts[i].phoneNumbers.length; j++) {
              var phone = contacts[i].phoneNumbers[j];
              console.log("===> " + phone.type + "  " + phone.number + " (" + phone.normalizedNumber+ ")");
              that.contacts.push({
                name: contacts[i].displayName,
                number: phone.normalizedNumber,
                invited: false
              });
           }
        }
        that.groupContacts(that.contacts);
        that.isFetching = false;
        loader.dismiss();
        cb && cb();
      }, function(error) {
        console.error(error);
        that.isFetching = false;
        loader.dismiss();
      });
    });
  }

  searchContacts(ev: any) {
    let val = ev.target.value;
    if (val && val.trim() !== '') {
      this.groupContacts(this.contacts.filter((contact) => {
        return contact.name.toLowerCase().indexOf(val.toLowerCase()) > -1 || 
          contact.number.toLowerCase().indexOf(val.toLowerCase()) > -1;
      }));
    }
    else {
      this.groupContacts(this.contacts);
    }
  }

  groupContacts(contacts){
    this.groupedContacts = []; // init grouped list
    // sort all contacts by display name
    let sortedContacts = contacts.sort(function(a,b) {
      var x = a.name.toLowerCase();
      var y = b.name.toLowerCase();
      return x < y ? -1 : x > y ? 1 : 0;
    });
    let currentLetter = false;
    let currentContacts = [];
    // assign each contact to a group
    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);
    });
   }
}

ionic 2 本机联系人插件查找不退出

ionic 2 native contacts plugin find doesn't exit

angularjs

ionic2

ionic-native