Ionic App.component.html会话未显示

时间:2019-12-20 19:32:22

标签: android html angular ionic-framework ionic4

我想在app.component.html上用名为{{nama_cust}}的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)显示了会话的内容,但是当我以{{nama_cust}}的形式在html中调用会话时,它什么也没有显示。 Here's how it looks,在猫图片的上方和旁边应该有一个文字,但没有显示任何文字。

1 个答案:

答案 0 :(得分:1)

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

您正在使用未定义的键在sessionStorage上调用getItem()-因此没有要检索的内容,而且为什么看不到任何内容。 nama_cust已初始化,但未分配值。您需要从响应中获取它:

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