这个通知“标识符'gridOptions'是指componentAngular的私有成员”告诉我，我没有遵循编码最佳实践？

Question

I am using ag-grid as a framework to build my grids(OBVIOUSLY).
I have followed a simple tutorial. So here's the code so far,

typography.component.html

typography.component.ts

import {Component} from "@angular/core";
import {GridOptions} from "ag-grid-community";


@Component({
    selector: 'typography-cmp',
    moduleId: module.id,
    templateUrl: 'typography.component.html'
})

export class TypographyComponent {
    private gridOptions: GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "id",
                width: 100
            },
            {
                headerName: "Value",
                field: "value",
                width: 100
            },

        ];
        this.gridOptions.rowData = [
            {id: 5, value: 10},
            {id: 10, value: 15},
            {id: 15, value: 20}
        ]
    }
}  

This works perfecly. However, as you may have noticed in the html file:

gridOptions

is underlied in red. And this is why:

Identifier 'gridOptions' refers to a private member of the component

That is understandable. I am following the official tutorial. And I am wondering whether the code breaks any coding rules or best practices?
Thank you.

Answer 1

As you are using gridOptions in your template, it should not be declared as private variable.

More reference on this: Angular2 - should private variables be accessible in the template?

Another thread is still open on GitHub but you will get some more ideas regarding this: Better offline compiler error when accessing private properties