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

我的坏。我找到了这个问题，因为当数据绑定到表时我正在使用小写。

修正了更改为UPPER Case {{pay.Col1}}

后的问题

Angular 2数据未绑定到

1 个答案: