angular: Duplicate tbody in ngFor

If I write something like this:

<tbody *ngFor="#item of [1,2,3]" myTableRow></tbody>

that uses the following component:

@Component({
  selector: '[myTableRow]',
  template: '<tr><td>test</td></tr>'
})
export class MyTableRow {}

then it produces invalid HTML, there will be two nested tbody tags, like this:

<tbody mytablerow="">
  <tbody>
    <tr><td>test</td></tr>
   </tbody>
</tbody>

(In the real application I use this to group together multiple tr tags in a tbody, and the table has many tbody tags after each other)

I get all kinds of malformed tables because of this, and it also breaks the usual table > tbody > td CSS rules, and is actually invalid HTML. This worked fine with alpha.46, but has been broken since alpha.47. Demo here: http://plnkr.co/edit/myYJZf6ZZj1ofhIcNj7E?p=preview

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 5
Comments: 29 (8 by maintainers)

Commits related to this issue

Fix socket cleanup on logout - Also still experiencing socket cleanup issues due to https://github.com/angular/angular/issues/8458 - Tables were changed with cards in previous commit due to https://g... — committed to revov/uci-gui by revov 8 years ago
fix(HtmlParser): do not add required parents to template root elements fixes #5967 — committed to vicb/angular by vicb 8 years ago
fix(HtmlParser): do not add required parents to template root elements fixes #5967 — committed to vicb/angular by vicb 8 years ago
fix(HtmlParser): do not add required parents to template root elements fixes #5967 — committed to vicb/angular by vicb 8 years ago
fix(HtmlParser): do not add required parents to template root elements fixes #5967 — committed to vicb/angular by vicb 8 years ago

Most upvoted comments

Any update on this one? It’s a P2 with a fix attached to it – but this bug still made it into the release candidate.

denodaeus on May 5, 2016

fix is coming…

vicb on Jun 15, 2016

+1 on this. FYI, in rc1 this is fixed by: compiler/src/html_parser.js, line 257 should be: if (lang_1.isPresent(parentEl) && tagDef.requireExtraParent(parentEl.name)) {

chrille112 on May 26, 2016

Actually, the issue doesn’t depend on ngFor at all, the same thing happens with a template like this:

<tbody myTableRow></tbody>

The problem is caused by the fact that the template parser’s required parent logic applies to the template’s root elements too: but the parent element of the template’s root element is unkown at the time when the template is compiled, it will only be revealed when the component is inserted into the page.

If I change angular’s html parser to skip the required parent logic for the root element(s), then everything works fine. In html_parser.ts

if (tagDef.requireExtraParent(isPresent(parentEl) ? parentEl.name : null)) {

should be:

if (isPresent(parentEl) && tagDef.requireExtraParent(parentEl.name)) {

ggmod on Dec 27, 2015

@pkozlowski-opensource Is there anything we can do to speed this up? There’s already a proposed fix above. Would that be an acceptable fix? Do you need a pull request including that change? Can we please get this fixed soon?

poke on May 18, 2016