Question

我有一个Ionic 4.4.0 / Angular 5.0.1 app，它通过表达式{{}}在页面上显示角度变量。它在MotoG5 / Android 7.0上正确运行，但它不适用于华为ALE-L23 / Android 5.0.1。它甚至不显示静态标签，只有视图的一部分是画布图，其余是白色空间。虽然如果我们点击白色空间，我们可以看到离子选择弹出窗口和选项。

我已经研究过一个没有运气的类似案例。

我想知道某人是否遇到过类似问题以及您是如何解决的，或者是否有人能够确定问题是什么。

以下是View的代码：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      {{ 'GRADES.TITLE' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding id="page3">

    <h1 id="calificaciones-heading1" style="color:#000000;" text-center>
      {{calificacionesAlumno.nombre}}
    </h1>
    <h4 text-center>{{calificacionesAlumno.escuela}}</h4>
    <p text-center>{{ 'GRADES.GRADE-GROUP' | translate }} - {{calificacionesAlumno.gradoGrupo}}</p>
    <p text-center>Periodo: {{calificacionesAlumno.periodo}}</p>
    <ion-list id="calificaciones-list4">
      <ion-item id="calificaciones-select2">
        <ion-label>
          {{ 'GRADES.SELECT-MONTH' | translate }}
        </ion-label>
        <ion-select name="" (ionChange)="obtenerCalificacionesPorPeriodo($event)" interface="popover">
          <ion-option (ngModel)="periodoFiltro" *ngFor="let periodo of periodos" value="{{periodo}}">
            {{periodo}}
          </ion-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-card >
      <ion-card-header>
        {{ 'GRADES.GRAPH-TITLE' | translate }}
      </ion-card-header>
      <ion-card-content>
        <canvas #grafCalificaciones></canvas>
      </ion-card-content>
    </ion-card>

    <ion-list id="calificaciones-list7">
      <ion-item color="none" id="calificaciones-list-item5" *ngFor="let calificacion of calificacionesAlumno.calificaciones">
        <h2>
          {{calificacion.materia}}
        </h2>
        <h3>
          {{calificacion.calificacion}}
        </h3>

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

这里是依赖包package.json

"dependencies": {
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/facebook": "4.4.2",
    "@ionic-native/google-plus": "4.4.2",
    "@ionic-native/push": "4.0.1",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ngx-translate/core": "9.0.2",
    "@ngx-translate/http-loader": "2.0.1",
    "angularfire2": "5.0.0-rc.4",
    "chart.js": "2.7.1",
    "cordova-plugin-facebook4": "1.7.4",
    "cordova-plugin-googleplus": "5.1.1",
    "cordova-plugin-statusbar": "2.3.0",
    "firebase": "4.6.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ngx-webstorage": "2.0.1",
    "phonegap-plugin-push": "1.10.5",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.2",
    "gulp": "3.9.1",
    "gulp-replace": "0.6.1",
    "gulp-zip": "4.0.0",
    "merge-stream": "1.0.1",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-statusbar": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.1234"
      },
      "phonegap-plugin-push": {
        "SENDER_ID": "1234"
      },
      "cordova-plugin-facebook4": {
        "APP_ID": "1234",
        "APP_NAME": "appName"
      }
    }
  }

更新我将模板从离子改为预定义的模板并且工作正常。 https://ionicframework.com/docs/components/#card-advanced-social

我之所以相信它为什么在一部手机而不是另一部手机上工作的原因，可能是webview的不同之处在于它的渲染引擎可能会有所不同。我们现在看到在不同手机上测试的重要性！

Answer 1

用硬编码的东西替换{{expressions}}，看看问题是否真的与角度没有呈现变量值有关，或者是css问题。

Ionic / Angular5应用程序无法在一部手机上正确呈现

1 个答案: