离子项目,在屏幕顶部随机创建一个输入标签?

时间:2017-11-23 03:34:15

标签: html ionic-framework

我正在开发一个离子项目,当我在我的应用程序中实现native时,当我运行action sheet函数时,它会自动在我的标题栏中弹出一个输入标记。为什么?以下是我的代码

problem.html:

  <button ion-button (click)="openMenu()">&nbsp;&nbsp;Upload Photo</button>

    <ion-card ng-show="showstartCard" >
  <ion-slides pager="true" class="slides">
    <ion-slide *ngFor="let photo of photos; let id = index">
      <ion-icon ios="ios-add-circle" md="md-add-circle" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
      <img style="width:30px;height:30px;" [src]="photo" *ngIf="photo" />
    </ion-slide>
  </ion-slides>
</ion-card>

problem.ts

openMenu() {
let actionSheet = this.actionSheetCtrl.create({
  title: 'Choose from',
  cssClass: 'action-sheets-basic-page',
  buttons: [
    {
      text: 'Camera',
      icon: !this.platform.is('ios') ? 'trash' : null,
      handler: () => {
        this.takePhoto();
        console.log('Delete clicked');
      }
    },
    {
      text: 'Album',
      icon: !this.platform.is('ios') ? 'share' : null,
      handler: () => {
        this.takeGallery();
        console.log('Share clicked');
      }
    },
    {
      text: 'Cancel',
      icon: !this.platform.is('ios') ? 'close' : null,
      handler: () => {
        console.log('Cancel clicked');
      }
    }
  ]
});
actionSheet.present();
}

deletePhoto(index) {
    let confirm = this
      .alertCtrl
      .create({
        title: 'Sure you want to delete this photo? There is NO undo!',
        message: '',
        buttons: [
          {
            text: 'No',
            handler: () => {
              console.log('Disagree clicked');
            }
          }, {
            text: 'Yes',
            handler: () => {
              console.log('Agree clicked');
              this
                .photos
                .splice(index, 1);
              //return true;
            }
          }
        ]
      });
    confirm.present();
  }

  takePhoto() {
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this
      .camera
      .getPicture(options)
      .then((imageData) => {
        this.base64Image = "file://" + imageData;
        this
          .photos
          .push(this.base64Image);
        this
          .photos
          .reverse();
      }, (err) => {
        console.log(err);
      });
  }

  takeGallery() {
    this.camera.getPicture({
      sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
      destinationType: this.camera.DestinationType.DATA_URL
    }).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
      this
        .photos
        .push(this.base64Image);
      this
        .photos
        .reverse();
    }, (err) => {
      console.log(err);
    });
  }

当我点击“上传照片”按钮时,它会弹出一个操作表

enter image description here

当我点击相册时,它应该在弹出时运行相册..但我不知道为什么项目会在我的html顶部选择文件按钮。谁知道是什么原因??

enter image description here

这是我的控制台日志。

enter image description here

任何人都可以知道发生此错误的原因是什么?请。谢谢!!

0 个答案:

没有答案