使用Angular,如何将变量输出到HTML？

Question

使用Angular,我试图将构造函数中的局部变量传递给HTML.

这是我的TS:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  constructor(public navCtrl: NavController) {

    var restaurants = [
    'Restaurant1',
    'Restaurant2',
    'Restaurant3'
  ];

    var restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
    console.log(restaurant);
  }

}

这是我的HTML:

<ion-content padding>
  <ion-item>
    {{restaurant}}
  </ion-item>
</ion-content>

restaurant在构造函数触发时正在记录.我只是不确定如何在HTML中显示它.我错过了什么？

Answer 1

您不能将var变量绑定到 html（因为它不是属性！）。创建一个字符串变量并将其绑定到 html 中。该this关键字用于访问组件内部的属性。

export class RandomPage {
  restaurant: string;

  constructor(public navCtrl: NavController) {

   var restaurants = [
    'Restaurant1',
    'Restaurant2',
    'Restaurant3'
  ];

  this.restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
  console.log(this.restaurant);

Answer 2

restaurant在构造函数范围中定义,而不是作为实例变量.因此,Angular无法访问该变量.您需要修改代码以匹配定义公共实例变量的这种通用格式,bar然后在Foo类构造函数内部为其赋值.

export class Foo() {
     public bar: string;

     constructor() {
         this.bar = 'a string';
     }
}

这是关于变量声明的TypeScript手册部分.这可能值得一读.