角度 2 中组件中的表格行

Question

我想在 Angular 2 中制作一个 TableRowsComponent，它可以呈现为多个表格行。

我想在这样的模板中使用它：

<table class>
    <tbody>
        <table-rows *ngFor="#item of list" [someInput]="item"></table-rows>
    </tbody>
</table>

（因此“table-rows”将是此处 TableRowsComponent 的选择器） TableRowsComponent 的模板将类似于：

<tr>
    <td> foo </td> 
    <td> bar </td>
</tr>
<tr *ngIf="something">
    ....
</tr>
<tr *ngFor="..">
     ...
</tr>

如果我们这样做，那么结果如下所示：

<table class>
        <tbody>
            <table-rows>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </table-rows>
            <table-rows>
                <tr>
                    ...
                </tr> 
                <tr>
                    ...
                </tr> 
            </table-rows> 
        </tbody>
</table>

不幸的是， 元素弄乱了表格的渲染。如何解决这个问题呢？有没有办法让 angular2 不呈现 元素？

Answer 1

在命名选择器时，您可以使用[table-rows] 而不是table-rows。

例如

`@Component({
    moduleId: module.id,
    selector: '[table-rows]',
    templateUrl: 'table-rows.component.html'
})`

然后简单地在 tbody 标签中使用它，ala <tbody table-rows></tbody>

Answer 2

import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, NgForm, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';

    @Component({
      selector: '[dependent-row]',
      providers: [],
      template: `
        <tr [formGroup]="dependentForm">
          <td>
            <input type="text" formControlName="foo">
          </td>
          <td>
            <input type="text" formControlName="bar">
          </td>
        </tr>
      `,
      directives: [REACTIVE_FORM_DIRECTIVES]
    })
    export class DependentRowComponent implements OnChanges {
      @Input() dependent: any;
      _Form: any;

      constructor(fb: FormBuilder) {
        this.dependentForm = fb.group({
          foo: [''],
          bar: [''],
        })
      }

      ngOnChanges() {
        this._Form.find('foo').updateValue(this.dependent.foo);
        this._Form.find('bar').updateValue(this.dependent.bar);
      }
    }