时间戳

首页 > 解决方案 > Ionic App.component.html 会话未显示

android - Ionic App.component.html 会话未显示

问题描述

我想{{nama_cust}}在 app.component.html 调用的 html 中显示会话，但它没有显示任何内容/空白，代码有问题吗？还是 app.component 无法处理会话？这是我的代码。

app.component.html

 <ion-app>
  <ion-split-pane>
    <ion-menu type="overlay" id="menu-avatar">
      <ion-header>
        <ion-toolbar>
          <ion-title>{{nama_cust}}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
            <div #header>
                <ion-row style="align-items:center;">
                  <ion-col col-6>
                    <img class="user-avatar" (click)="asd()" src="assets/ava/dum.jpg"/>
                  </ion-col>
                  <ion-col col-3>
                    <h4 id="tes"> {{nama_cust}} </h4>
                  </ion-col>
                </ion-row>
              </div>

app.component.ts

import { Component, NgModule, OnInit } from '@angular/core';
import { Platform, ToastController, IonicModule } from '@ionic/angular';
import { Router } from '@angular/router';
import { Storage, IonicStorageModule } from '@ionic/storage';
import { PostProvider } from 'src/providers/post-provider';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})


export class AppComponent implements OnInit {
  public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'List',
      url: '/list',
      icon: 'list'
    }
  ];

  anggota: any;
  nama_cust: string;

  constructor(
   private router: Router,
   private postPvdr: PostProvider,
   private storage: Storage,
   public toastCtrl: ToastController,
   private sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
  }

  ionViewWillEnter() {
    this.storage.get('session_storage').then((res) => {
      this.anggota = res;
      this.nama_cust = sessionStorage.getItem(this.nama_cust);
      console.log(res);
    });
  }
}

console.log(res)正在显示会话的内容，但是当我在 html 中调用会话时，{{nama_cust}}它什么也没显示。这是它的外观，猫图片上方和旁边应该有一个文本，但它没有显示任何内容。

标签： androidhtmlangularionic-frameworkionic4

解决方案

你正在getItem()用sessionStorage一个undefined键调用：

this.nama_cust = sessionStorage.getItem(this.nama_cust);

所以没有什么可以检索的，这就是为什么你什么也没看到。 nama_cust已初始化，但未分配值。

您需要从响应中获取它：

this.storage.get('session_storage').then((res) => {
  this.anggota = res;
  this.nama_cust = res.result.nama_cust;
  console.log(res);
});

推荐阅读