如何将 <input> 元素传递给绑定到某个 ng-model 的 ng-for？

Question

背景

我正在设计一个可重复使用的表格组件。该组件最初设计为仅以表格结构显示数据。

例如，您传入一个数据数组和一个 columnInfo 数组，组件会呈现一个 HTML 表格

不过，要求发生了变化，现在表格需要支持输入字段。

文本域 1 文本域 2 文本域 3 输入 1 输入 2

testestestestestsettestsetestestsetestestsetsetsett *dropdownhere* *textbox here*

---

问题

首先，简单地在每一行显示一个“额外的文本框列”已被证明是困难的。

我使用了一个简单的带有单选择器的 ng-content

表格组件。 html

<tr *ngFor="let row of rows" (click)="onCellClick(row)">

     <td *ngFor="let column of _columns">
           {{ getData(row,column) }}
     </td>

     <td><ng-content select="[test]"></ng-content></td>
</tr>

父组件

<table-component [columns] = "tableHeaders"
                 [data]="_allTasksArray"
                 (cellEvent)="getActionUrl($event)"
                 [filterAllColumns]="true"
        >

            <div  test >
                <h1>TEST</h1>
            </div>

</table-component>

但是这并没有按预期工作，h1 TEST 仅在 ONE 行中呈现。经过一番挖掘，我发现从 ng-content 传入的模板只能显示一次。

对我的要求不是很有用。

---

问题

如果有一种方法可以将 HTML 元素传递给组件以供 ngFor 使用，那么我如何将这些输入与值关联？

例如如果我想传入一个预先填充了特定于表中每一行的值的下拉列表。

它应该是这样工作的

<table-component>
    <template-for-content>
        <input [(ngModel)]="This would be linked row[column.name] in the table">
    </template-for-content>
</table-component>

表格

<td><ng-content someWayOfPassingDataBackToTemplate></ng-content></td>

Answer 1

你应该看看 angular 2 的响应式表单模块，我认为这将是一个很好的用例。在 Angular 2 文档中有一个很好的演练。反应式表单让您可以使用对象“以编程方式”定义表单。该演练显示您必须对其进行设置，以便您可以将一组配置对象（每个对象代表一个输入）传递给一个响应式指令，它将遍历该数组并根据每个配置对象呈现一个输入。它还展示了如何从反应形式中获取数据。