Question

我正在玩角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正在重复这个问题，但我在我的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() {}
}

您的主页组件模板应该是这样的：

<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标记列表并不适用于组件，因此我会重新考虑您的代码设计选择。将整个表放入一个组件可能会更好。

在一个tr中，在angular2中没有按预期工作

4 个答案:

HTML表格中的组件

表行上的组件