Question

我正在学习angular2教程并尝试迭代Array：

<table class = "table table-hover">
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Descreption</th>
    </thead>
    <tbody>
        <tr *ngFor = "#v of videos"></tr>
        <td>{{v.id}}</td>
        <td>{{v.title}}</td>
        <td>{{v.desc}}</td>
    </tbody>

</table>

我得到的错误是Cannot read property 'id' of undefined，但是当我在相同的 html中打印对象时：

<!--printing the same object -->
{{videos[0] | json}}

它按预期显示对象，例如：

{ "id": 1, "title": "title..", "videoCode": "afe6JW2oTZc", "desc": "My Videos" }

我尝试了json竖笛 - {{v.id | json}}，但仍无效，

感谢您的帮助。

Answer 1

您一直在关注错误的教程。 #v的使用是一种非常古老的语法，自从它进入测试阶段以来一直没有使用过。新语法使用let关键字：

另一方面，您应将td置于tr循环内，而不是在其外部：

<table class="table table-hover">
    <thead>
        <th>ID</th>
        <th>Title</th>
        <th>Descreption</th>
    </thead>
    <tbody>
        <tr *ngFor="let v of videos">
           <td>{{v.id}}</td>
           <td>{{v.title}}</td>
           <td>{{v.desc}}</td>
        </tr>
    </tbody>
</table>

我说的第二件事就是你的问题，但我相信更大的问题是你使用旧版角度。只需转到angular.io并在那里学习教程

Answer 2

select Job_no, widget_1, widget_2, NVL(widget_1, 0) + NVL(widget_2, 0) as total from yourTable 已被 # keyworkd取代。如果您正在处理异步调用，则需要使用let运算符进行属性的延迟绑定，如下所示，

?.

或

您可以使用 <tbody> <tr *ngFor = "let v of videos"> <td>{{v?.id}}</td> <td>{{v?.title}}</td> <td>{{v?.desc}}</td> </tr> </tbody> ，直到数据加载到对象，如下所示，

*ngIf

Angular 2 ngFor在访问属性时未定义

2 个答案: