如何将.ts变量传递给.html页面？

Question

我在打字稿文件中有以下代码：

"attributes.ts"

export class AttributesPage {
    chart: any[];

    constructor(
    //Assigning values to chartArray
    var chartArray = [1,2,3,4,5,6,7,8,9,10];
    //Should define the chart variable
    this.chart = chartArray

        })
    }
}

我想将“chart”变量分配给我的.html文件中的参数，但我无法通过它并在chart-here标记中使用它。

"attributes.html"

<ion-content>
    <ion-card-header>

            //Displays 1,2,3,4,5,6,7,8,9,10 
            {{this.chartArray}}

            //Displays 1,2,3,4,5,6,7,8,9,10
            {{this.chart}}

            //Undefined
            {{chart}}

        <ion-card-content>

                //When I try to assign the values of the variables to the [readings] parameter in <chart-here>
                     //"this.chartArray": undefined
                     //"this.chart": undefined
                     //"chart": undefined
                <chart-here [readings]= "chart"></chart-here>               

              </ion-card-content>
        </ion-card-header> 

或者，这可行：

"attributes.html"

<ion-content>
    <ion-card-header>
        <ion-card-content>

                <chart-here [readings]= [1,2,3,4,5,6,7,8,9,10]></chart-here>               

              </ion-card-content>
        </ion-card-header> 

以及我在.ts页面中定义图表变量的时候：

"attributes.ts"

export class AttributesPage {
    chart: any[] = [1,2,3,4,5,6,7,8,9,10];

    constructor()
}

如何定义我的图表变量或将this.chartArray / this.chart作为变量传递给“chart-here”标签？