Question

我创建了一个包含姓名和电话号码的联系人列表，现在我正在尝试在列表中的项目滑动时添加呼叫按钮和短信按钮..在左侧和右侧，带有一个呼叫按钮和短信滑动的一面，但它对我不起作用...... 我正在使用离子3.3.0，我尝试了很多找到我的错误，但不知道我哪里出错了。请帮我解决一下这个。我无法猜测错误，因为它只在移动设备上运行，所以如果有任何运行时错误，我无法在localhost上看到它。

我的HTML代码：

<ion-header>   
  <ion-navbar>
    <ion-title>
      Contacts
    </ion-title>   
  </ion-navbar> 
</ion-header> 

<ion-toolbar>
  <ion-buttons start>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  </ion-buttons>   
  <ion-buttons end>
    <button ion-button icon-only clear (click)="presentPopover($event)" class="text-on-bottom">       Menu
      <ion-icon name="more"></ion-icon>     
    </button>
  </ion-buttons>  
</ion-toolbar>

<ion-content>
  <ion-list>   
    <ion-item-group *ngFor="let group of groupedContacts">
      <ion-item-divider color="light">{{group.letter}}</ion-item-divider>   

      <ion-item-sliding *ngFor="let contact of group.contacts" class="contactlist">
        <ion-item>
          {{contact.name}}
          <p>{{contact.number}}</p>
        </ion-item>

        <ion-item-options side="right">
          <button ion-button color="secondary" *ngIf="contact.phoneNumbers" (click)="callContact(contact.phoneNumbers[0].value)">
            <ion-icon name="call"> Call</ion-icon>
          </button>   
        </ion-item-options>

        <ion-item-options side="left">
          <button ion-button color="danger" (click)="sendmessage()">
            SMS
          </button>   
        </ion-item-options>
      </ion-item-sliding>   
    </ion-item-group> 
  </ion-list> 
</ion-content>

这是我的打字稿文件：

import { Component } from '@angular/core';
import { NavController,Platform ,PopoverController,ViewController} from 'ionic-angular';
import { Contacts } from '@ionic-native/contacts';
import {SMS} from '@ionic-native/sms';
import{CallNumber}from'@ionic-native/call-number';
import{SmsPage}from'../sms/sms';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {
  contacts = [];
  groupedContacts = [];

  constructor(public navCtrl: NavController,public co:Contacts,public viewCtrl:ViewController,public popoverCtrl:PopoverController,
      public callNumber:CallNumber,public sms:SMS) 
  {
    this.initializeItems();

    co.find(["displayName", "phoneNumbers"], {multiple: true, hasPhoneNumber: true}).then((contacts) => {
      for (var i=0 ; i < contacts.length; i++){
        if(contacts[i].displayName !== null){
          var obj = {};
          obj["name"] = contacts[i].displayName;
          obj["number"] = contacts[i].phoneNumbers[0].value;
          this.contacts.push(obj)   
          //  this.triggerAlphaScrollChange++;
          // adding in separate array with keys: name, number
        }      
      }

      this.groupContacts(this.contacts);
    })
  }

  callContact(number:string) {
    this.callNumber.callNumber(number, true)
      .then(() => console.log('Dialer Launched!'))
      .catch(() => console.log('Error launching dialer'));
  }

  sendmessage()
  {
    this.navCtrl.push(SmsPage);
  }

  initializeItems() {
    this.items =  this.contacts;
  }

}

groupContacts(contacts){

  let sortedContacts = contacts.sort(function(a, b){
    if(a.name < b.name) return -1;
    if(a.name > b.name) return 1;
    return 0;
  });

  let currentLetter = false;
  let currentContacts = [];

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

项目 - 在离子列表中不起作用，因为没有滑动而没有可见的按钮

0 个答案: