Question

我尝试在Ionic中编写一个应用程序：这里是代码：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Welcome</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Let's start</h3>

  <p>
    Some text here.
  </p>

  <ul>
    <li> {{ Schueler.name }} </li>
  </ul>

</ion-content>

这是打字稿定义：

import { Component } from '@angular/core';

import { NavController , NavParams } from 'ionic-angular';
import { Student } from '../../app/student.components';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public navCtrl: NavController) {
    var Schueler = new Student('Doldi');
    console.log(Schueler.name)
  }
}

新Schueler的实例化工作正常，我可以在控制台中打印出来。

我收到错误：＆＃34; ./Page1类Page1中的错误 - 由以下原因导致：无法读取属性＆＃39; name＆＃39;未定义＆＃34; 我认为可以在HTML代码中访问Schueler实例。

Answer 1

您需要正确分配。目前，您有一个开放式变量Schueler，它等于一个新的Student实例。虽然它可以作为console.log正常工作，但是为了将它传递给视图，你需要分配它。

export class Page1{
   studentName:string; // assignable element for view

   constructor(public navCtrl: NavController) {
      let Schueler = new Student('Doldi');
      this.studentName = Schueler.name;
   }
}

然后在你看来

<ul>
  <li> {{ studentName.name }} </li>
</ul>

您还可以在Student

中实例化constructor()对象

constructor(public navCtrl: NavController,public student: Student) { 
    this.student = student('Doldi');
}

...

<ul>
  <li> {{ student.name }} </li>
</ul>

＆＃34; Ionic / Angular 2：访问对象：./ Page1类Page1中的错误 - 由以下原因导致：无法读取属性＆＃39; name＆＃39;未定义＆＃34;

1 个答案: