创建具有两行表格的可重复 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

我看不到正确的“角度”方式来做到这一点，但你应该能够使用指令在渲染过程中清除你的html。

在此处的评论中看到了这种方法：Angular2：渲染没有包装标签的组件

我尝试过，它对我有用：

父组件：

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

  }
}

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

Answer 2

感谢您提供的解决方案。 我想对您的代码进行更正，以避免使用

setTimeout

函数。 实现指令的

OnInit

接口并将代码从构造函数移动到

ngOnInit

方法将使代码保持干净。

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

@Directive({
  selector: '[remove-component-tag]'
})
export class RemoveComponentTagDirective implements OnInit{

  constructor(private el: ElementRef) { }

  ngOnInit() {
    let element = this.el.nativeElement;
    let children = this.el.nativeElement.childNodes;

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

看看 Angular 生命周期钩子

Answer 3

使用组件语法而不是指令语法在这里会有帮助吗？

代替：

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

尝试：

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

Answer 4

另一种选择是申请

:host { display: table-row-group; }

对于 app-item 组件，这使其表现得像

tbody

并且内部行将按预期表现。