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

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

export class Foo() {
     public bar: string;

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

这里是变量声明的TypeScript handbook section。值得一读。

Answer 2

您无法将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);

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

2 个答案: