tr 中的 ngFor 在 angular2 中没有按预期工作

Question

我正在玩 angular 2（第一天；））。

我正在使用一个显示 tr 的组件，而另一个将在其中重复 tr 的组件。

<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>

<table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list [sensors]="sensors"></sensor-list>
</table>

然后，在传感器列表中：

<h3>Sensor list</h3>
<a (click)="refreshSensors()" class="btn btn-primary">Escanear Sensores</a>

<table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list [sensors]="sensors"></sensor-list>
</table>

当 ngFor 正确地重复 tr 时，我在我的 html 中得到了一个标签，导致表格无法正常显示：

    <table class="table">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Description</th>
        </tr>
    </thead>
    <sensor-list><tbody><!--template bindings={}--><tr>
    <td>R2D2</td>
    <td>Description of r2d2</td>
</tr><tr>
    <td>C3PO</td>
    <td>Description of c3po</td>
</tr></tbody></sensor-list>
</table>

我必须指定要在组件中显示的标签吗？用角度做这件事的正确方法是什么？

Answer 1

HTML 表格内的组件

我想进一步扩展一下。这是一个棘手的问题。可能大多数从动态呈现表格开始的人都遇到过这种情况。

这是你得到（清理）的代码：

import { Component } from '@angular/core';

@Component({
  selector: 'table-body',
  template: `
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  `
})
class TableBodyComponent {}

@Component({
  selector: 'sg-app',
  template: `
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <table-body></table-body>
    </table>
  `,
  directives: [TableBodyComponent]
})
export class AppComponent {}

Angular 渲染的内容如下：

而且它不是有效的 HTML（参考：MDN Table）。这种方式的观点是破坏和不可预测的。

表格行上的组件

但是您仍然可以将组件或指令（作为属性）添加到 <tr> 标记：

import { Component } from '@angular/core';

@Component({
  selector: '[table-row]',
  template: `
    <td>Cell 1</td>
    <td>Cell 2</td>
  `
})
class TableBodyComponent {}

@Component({
  selector: 'sg-app',
  template: `
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
         <tr table-row></tr>      
      </tbody>
    </table>
  `,
  directives: [TableBodyComponent]
})
export class AppComponent {}

这样你也可以将*ngFor添加到<tr>

Answer 2

你的传感器列表组件应该是这样的

你的传感器组件是这样的吗

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'sensor-list',
  template: `
       <tbody>
          <tr *ngFor="let row of sensors">
            <td>{{row.sensor}}</td>
            <td>{{row.description}}</td>
          </tr>
       <tbody>
  `,
  providers: []
})
export class Sensor {
  @Input('sensors') type: any;

  constructor() {}
}

你的 home 组件的模板应该是这样的：

<sensor-list [sensors]="sensors"></sensor-list>

Answer 3

做类似的事情

父组件模板

<tr tool *ngFor='let tool of tools' [_tool]='tool'>

子组件

import {Component, Input, OnChanges} from '@angular/core'
import {ITool} from '../../app/common/interfaces/ITool'

@Component({
    selector: '[tool]',
    templateUrl: 'app/toolslist/tool.template.html',
    styleUrls: ['app/toolslist/tool.style.css'],
})

export class ToolComponent implements OnChanges{
    @Input() _tool: ITool; 

    constructor() {

    }

    ngOnChanges():void{
        console.log(this._tool);
    };
}

Answer 4

Angular 2 总是将主机标签留在 DOM 中，并且只将模板中的 HTML 插入到主机标签中。由于tr 标签列表对于组件来说并不是一个很好的用途，因此我会重新考虑您的代码设计选择。将整个表格放入一个组件中可能会更好。