html - 创建具有两行表格的可重复 Angular 组件

Question

我有两个组件。第一个代表项目表，第二个代表一个项目。第一个是多次重复第二个。

列表组件(app-list):

<table>
    <tr *ngFor="let item of items" [item]="item" app-item></tr>    
</table>

项目组件(app-item):

<td>
    <img src="https://someimage.com/{{item.img}}.jpg">
</td>
<td>
    <h3>{{item.name}}</h3>
</td>
<td>
    {{item.description}}
</td>

为了让它工作，我必须为 app-item 组件使用属性选择器:

@Component({
  selector: '[app-item]'
})

这非常有效。

---

现在我想改进它并在每个 app-item 中添加第二行。我的问题是 tr 标签位于 app-list 组件中，而不是 app-item 组件中。我想如果我将它移动到 app-item 组件，我可以添加另一个 tr 并且能够为每个项目显示两行。所以这就是我所做的。之后，我使用 ng-container 重复我的 app-list 中的项目，以避免在我的两行周围添加包装标签:

<ng-container *ngFor="let item of items" [item]="item" app-item></ng-container>

此解决方案无效。我收到以下错误:

ERROR TypeError: el.setAttribute is not a function
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1089)
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EmulatedEncapsulationDomRenderer2.applyToHost (platform-browser.js:1157)
    at DomRendererFactory2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomRendererFactory2.createRenderer (platform-browser.js:1015)

您能帮我解决这个错误或建议其他实现方式吗？

---

编辑:解决方案

@Serhiy 建议的更好的版本

表格:

<table>
  <app-item *ngFor="let item of items" [item]="item" remove-component-tag></app-item>
</table>

指令:

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[remove-component-tag]'
})
export class RemoveComponentTagDirective {
  constructor(private el: ElementRef) {

    let element = el.nativeElement;
    let children = el.nativeElement.childNodes;

    setTimeout(()=>{
      let reversedChildren = [];
      children.forEach(child => {
        reversedChildren.unshift(child);
      });
      reversedChildren.forEach(child => {
        element.parentNode.insertBefore(child, element.nextSibling);
      });
      element.remove(element);
    }, 0);

  }
}

出于某种原因，超时是必需的，即使为 0 也能正常工作。

Answer 1

我看不到正确的“Angular ”方式，但您应该能够在渲染期间使用指令来清除您的 html。

在此处的评论中看到了这种方法:Angular2 : render a component without its wrapping tag

我试过了，它对我有用:

父组件:

<table>

  <div *ngFor="let item of items">
    <app-item [item]="item" remove-wrapper></app-item>  
  </div>

</table>

子组件:

<tr>
    <td>
      <img src="https://someimage.com/{{item.img}}.jpg">
    </td>

    <td>
      <h3>{{item.name}}</h3>
    </td>

    <td>
      {{item.description}}
    </td>      

</tr>

<tr>
    <td>
      <img src="https://someimage.com/{{item.img}}.jpg">
    </td>

    <td>
      <h3>{{item.name + ' 2'}}</h3>
    </td>

    <td>
      {{item.description + ' 2'}}
    </td>      

</tr>

指令:

@Directive({
  selector: '[remove-wrapper]'
})

export class RemoveWrapperDirective {

  constructor(private el: ElementRef) {

    let parent = el.nativeElement.parentElement;
    let children = el.nativeElement.childNodes;

    setTimeout(()=>{
      parent.parentNode.insertBefore(children[1], parent.nextSibling);
      parent.parentNode.insertBefore(children[0], parent.nextSibling);
      parent.remove(parent);
    }, 10);

  }
}

没有超时，它为我崩溃了。代码可以改进，但你可以从这里开始。