背景

Question

背景

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

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

然而，需求发生了变化，现在该表需要支持输入字段。

Textfield 1        Textfield 2         Textfield 3         Input 1       Input 2    

testestestestestsetestsetestestsetestestsetsetsett     *dropdownhere*   *textbox here*

问题

首先，只需显示一个＆＃34;额外的文本框列＆＃34;在每一行都证明是困难的。

我使用了简单的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

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

如何将<input />元素传递给ng-for，这与某些ng-model绑定？

背景

问题

问题

1 个答案: