Angular 2 数据未绑定到 <table>

Question

我试图将简单的 JSON 数据绑定到 <table>。但是，我的 html 页面显示的是空数据，但行数显示为每个数据。每个<tr> 里面的数据都是空的。不知道我的代码有什么问题。

如果我在这里做错了什么，有人可以帮助我吗？

Pay.Component.ts

@Component({
moduleId: module.id,    
templateUrl: './pay.component.html'
})

export class PayComponent  {    

myData: any[] = [
    {
        "Col1": "120f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
        "Col2": "2017-03-27T00:00:00-07:00",
        "Col3": "Testing1"            
    },
    {
        "Col1": "320f2dcf-d4a4-4b3c-994a-e4e0c79bd642",
        "Col2": "2018-03-27T00:00:00-07:00",
        "Col3": "Testing2"            
    }]
}

pay.component.html

<div class="content table-responsive table-full-width">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Col1</th>
                                <th>Col2</th>
                                <th>Col3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor='let pay of myData'>
                                <td>{{ pay.col1 }}</td>
                                <td>{{ pay.col2 }}</td>
                                <td>{{ pay.col3 }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

不确定代码出了什么问题。

Answer 1

我的错。我发现了这个问题，因为我在数据绑定到表时使用了小写。

修复了更改为大写 {{ pay.Col1 }}

后的问题