【问题标题】:File input not working inside <ion-menu>文件输入在 <ion-menu> 中不起作用
【发布时间】:2018-01-16 21:57:50
【问题描述】:

虽然我的应用程序中没有 ion-menu,但它运行良好,但在将其添加到我的代码后:

<ion-menu [content]="content">
<ion-header>
  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let file of fileNames;let i = index;" #item>
      <ion-item [ngClass]="{ 'active':i == isActive}" ion-long-press [interval]="400" (onPressStart)="fileChosen(i)">
        {{file}}
  <button ion-button (click)="deleteFile(i)">Delete file</button>

      </ion-item>
      <ion-item-options side="left" (ionSwipe)="save()">

        <button ion-button color="danger" (click)="moreInfo(item)">More Info</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <input type="file" (change)="uploadFile($event)">
  <button  (click)="doSome()" [disabled]="isFileChosen">DOSOME</button>
</ion-content>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

文件输入停止在设备上打开文件对话框,但在浏览器中打开它。我认为问题出在事件中,因为菜单通过滑动打开,但不知道如何解决该问题。请帮帮我

PACKAGE.JSON

{ “名称”:“我的应用程序”,

"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "b-spline": "^2.0.1",
    "canvasjs": "^1.8.1",
    "chart.js": "^2.6.0",
    "chartjs": "^0.3.24",
    "cordova-android": "^6.2.3",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.6.0",
    "ionic-long-press": "^1.2.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
},
"devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.7.0",
    "typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
    "plugins": {
        "cordova-plugin-device": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-statusbar": {},
        "cordova-plugin-whitelist": {},
        "ionic-plugin-keyboard": {},
        "cordova-plugin-file": {}
    },
    "platforms": [
        "android"
    ]
} }

【问题讨论】:

  • 那你能在你的菜单上显示整个代码吗?
  • @Sampath,我更新了主题中的代码
  • @Sampath,同样,在列表项上滑动也不起作用
  • 你也可以显示package.json 文件吗?
  • @Sampath,也添加了它

标签: angular file ionic-framework ionic3


【解决方案1】:

您需要使用swipe,如下图。现在没有(ionSwipe)

 <ion-item-options side="left" (swipe)="save($event)">

也看到这个:swipe

【讨论】:

  • 抱歉没听明白? input?
  • 没有。问题是在我的浏览器中,当我单击输入按钮时 - 显示文件对话框。但是当我构建 apk 并将其上传到我的 android 设备 @6.0.1 并单击输入按钮时 - 没有任何反应
  • 是的,直到我将 添加到项目中
  • 看来你的*ngFor 循环有一个严重的问题。你也可以在关闭循环后访问循环的对象:&lt;button ion-button (click)="deleteFile(i)"&gt;Delete file&lt;/button&gt;i 这里是什么?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-04-18
  • 1970-01-01
  • 2014-09-18
  • 1970-01-01
  • 1970-01-01
  • 2013-04-28
  • 1970-01-01
相关资源
最近更新 更多