使用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 无法访问该变量。您需要修改您的代码以匹配这种定义 public 实例变量 bar 的通用格式，然后在其 Foo class 构造函数中为其分配一个值。

export class Foo() {
     public bar: string;

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

这是关于变量声明的TypeScript handbook section。可能值得一读。

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

Using Angular, how can I output a variable to HTML?

angular

angular5