typescript 用 angular2 *ngFor 填充表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40656055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
populating a table with angular2 *ngFor?
提问by confusedandenthused
I'm trying to populate a bootstrap styled table with information retrieved from a get request.
我正在尝试使用从 get 请求中检索到的信息填充引导样式表。
I am getting the information just fine, but it is not being output in the desired way.
我得到的信息很好，但它没有以所需的方式输出。
Here is my code;
这是我的代码；
view component
视图组件
<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 component
查看员工列表组件
<tr>
<td>{{employee.name}}</td>
</tr>
However it does not output the desired result, here is an image of the dom tree;
然而它并没有输出想要的结果，这里是dom树的图像；
and for ref the kind of table I'm trying to duplicate;
对于 ref 我试图复制的那种表格；
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.
我认为模板语法将被忽略，dom 会将模板容器中包含的内容解释为“根”级别，但事实并非如此。
I'm not sure how to remedy the problem, and was hoping someone could offer some advice?
我不知道如何解决这个问题，希望有人能提供一些建议？
回答by Igor
If you use an attribute selector instead and change the view to only create the columns tdinside that template.
如果您改用属性选择器并将视图更改为仅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 component
查看员工列表组件
selector: '[view-employee-list]'
template: '<td>{{employee.name}}</td>'
回答by rfornal
Try something like this adjustment:
尝试这样的调整：
<tbody>
<tr view-employee-list [employee]="employee" *ngFor="let employee of employees"></tr>
</tbody>
Then, eliminate the <tr>tags inside the component and make it attribute based `"[view-employee-list]". This way, the tag is part of the template wrapper.
然后，消除<tr>组件内部的标签，并使其基于属性“[view-employee-list]”。这样，标签就是模板包装器的一部分。
