Angular를 사용하면 어떻게 변수를 HTML로 출력 할 수 있습니까?

Question

Angular를 사용하여 생성자의 로컬 변수를 HTML에 전달하려고합니다.

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

restaurant이 때 생성자 불을 기록하고 있습니다 : 여기 내 HTML입니다

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); 
    } 

} 

:

여기 내 TS입니다. HTML로 표시하는 방법을 모르겠습니다. 내가 뭘 놓치고 있니?

Answer 1

var 변수를 HTML에 바인딩 할 수 없습니다 (속성이 아니기 때문에!). 문자열 변수를 만들고이를 html에 바인드합니다. 키워드는 구성 요소 내부의 속성에 액세스하는 데 사용됩니다.

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 handbook section이 있습니다. 그것은 읽을만한 가치가있을 것입니다.