使用angular2 * ngFor填充表格？

发布时间：2020-12-17 06:56:43 所属栏目：安全来源：网络整理

导读：我正在尝试使用从get请求中检索到的信息填充bootstrap样式表. 我得到的信息很好,但它没有以所需的方式输出. 这是我的代码; 查看组件 div class="col-md-12" table class="table table-striped" thead tr thName/th /tr /thead tbody view-employee-list [emp

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

我得到的信息很好,但它没有以所需的方式输出.

这是我的代码;

查看组件

<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>

view-employee-list组件

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

但是它没有输出所需的结果,这里是dom树的图像;

dom

并且对于我想要复制的那种表格;

w3schools bootstrap table

我认为模板语法将被忽略,dom会将模板容器中包含的内容解释为“根”级别,但事实并非如此.

我不确定如何解决问题,并希望有人可以提供一些建议？

解决方法

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

<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组件

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!