Angular2在循环中呈现2个tr元素的组件 [英] Angular2 Component which renders 2 tr elements in a loop
问题描述
< tr> ...< p< p>< ; / TR>
< tr> ...< / tr>
必须使用* ngFor来创建表。
组件的选择器是 spot-row 。
该组件有一个名为 spot 的输入变量。
所需的输出必须如下所示： / p>
< table>
< tbody>
< tr> ...< / tr>
< tr> ...< / tr>
< / tbody>
< table>
我尝试了以下方法：
<表>
< tbody>
< spot-row * ngFor =spot spot of spots[spot] =spot>< / spot-row>
< / tbody>
< table>
但是这产生了
<表>
< tbody>
< spot-row>
< tr> ...< / tr>
< tr> ...< / tr>
< / spot-row>
< / tbody>
< table>
然后我尝试将组件选择器切换为 [spot-row] 并使用 ng-container
< table> ;
< tbody>
< ng-container spot-row * ngFor =spot spot of spots[spot] =spot>< / ng-container>
< / tbody>
< table>
但是，这产生了一个错误
错误：./SpotRowComponent类中的错误SpotRowComponent - inline
模板：0：0原因：未能在'节点'上执行'appendChild'：
此节点类型不支持此方法
然后我试着 template
< table>
< tbody>
< / tbody>
< table>
但是这也给我一个错误
错误：模板解析错误：嵌入模板上的组件：
SpotRowComponent（[错误 - >]
）
我搜索了StackOverflow并找到了
- Angular2表格行作为组件
这只是一个tr - Angular2：渲染一个没有包装标签的组件
问题询问tr元素，并且接受的答案是关于td元素的
-
这将呈现一个a dditional div元素
建议按照评论，未经测试。
$ b
组件选择器： [spot-row]
$ b 组件模板：
< tr> ...< / tr>
< tr> ...< / tr>
HTML：
<表>
< tbody * ngFor =让斑点斑点spot-row [spot] =spot>< / tbody>
< table>
这应该会产生：
<表>
< tbody>
< tr> ...< / tr>
< tr> ...< / tr>
< / tbody>
< tbody>
< tr> ...< / tr>
< tr> ...< / tr>
< / tbody>
...
< / table>
有效（多重< tbody> 在< table> ）。
I need to write a component that has a template that looks like this:
<tr>...</tr>
<tr>...</tr>
This must be used with *ngFor to create a table.
The selector for the component is spot-row.
The component has one input variable named spot.
The desired output must look like this:
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<table>
I tried the following:
<table>
<tbody>
<spot-row *ngFor="let spot of spots" [spot]="spot"></spot-row>
</tbody>
<table>
But this produced
<table>
<tbody>
<spot-row>
<tr>...</tr>
<tr>...</tr>
</spot-row>
</tbody>
<table>
Then I tried switching the component selector to [spot-row] and using ng-container
<table>
<tbody>
<ng-container spot-row *ngFor="let spot of spots" [spot]="spot"></ng-container>
</tbody>
<table>
But this produced an error
Error: Error in ./SpotRowComponent class SpotRowComponent - inline template:0:0 caused by: Failed to execute 'appendChild' on 'Node': This node type does not support this method
Then I tried template
<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>
But this also gives me an error
Error: Template parse errors: Components on an embedded template: SpotRowComponent (" [ERROR ->] ")
I searched StackOverflow and found
- Angular2 table rows as component which is only about one tr
- Angular2 : render a component without its wrapping tag where the question asks about tr elements and the accepted answer is about td elements
- How to remove/replace the angular2 component's selector tag from HTML which will render an additional div element
Suggestion as per comment, not tested.
Component selector: [spot-row]
Component template:
<tr>...</tr>
<tr>...</tr>
HTML:
<table>
<tbody *ngFor="let spot of spots" spot-row [spot]="spot"></tbody>
<table>
This should produce:
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
...
</table>
Which is valid (multiple <tbody> in <table>).
这篇关于Angular2在循环中呈现2个tr元素的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
