用angular2 * ngFor填充表格? [英] populating a table with angular2 *ngFor?

问题描述

我正在尝试使用从get请求中检索到的信息填充引导程序样式的表.

I'm trying to populate a bootstrap styled table with information retrieved from a get request.

我得到的信息很好，但是没有以期望的方式输出.

I am getting the information just fine, but it is not being output in the desired way.

这是我的代码；

查看组件

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <view-employee-list [employee]="employee" *ngFor="let employee of employees" ></view-employee-list>
        </tbody>
    </table>
</div>

查看员工列表组件

<tr>
     <td>{{employee.name}}</td>
</tr>

但是它没有输出理想的结果，这是dom树的图像；

However it does not output the desired result, here is an image of the dom tree;

并作为参考，我尝试复制该表的类型；

and for ref the kind of table I'm trying to duplicate;

w3schools引导表

我认为模板语法将被忽略，而dom将解释模板容器中包含的内容在根"级别，但是事实并非如此.

I thought that the template syntax would be ignored and the dom would interpret what was contained within the template container to be at the 'root' level, however this is not the case.

我不确定如何解决该问题，希望有人可以提供一些建议吗?

I'm not sure how to remedy the problem, and was hoping someone could offer some advice?

推荐答案

如果您改用属性选择器并更改视图，以仅在该模板内创建列td.

If you use an attribute selector instead and change the view to only create the columns td inside that template.

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr view-employee-list [employee]="employee" *ngFor="let employee of employees" ></tr>
        </tbody>
    </table>
</div>

view-employee-list组件

view-employee-list component

selector: '[view-employee-list]'
template: '<td>{{employee.name}}</td>'

这篇关于用angular2 * ngFor填充表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！