背景

我正在設計一個可重複使用的表格組件。該組件最初設計爲僅在表格結構中顯示數據。如何將<input>元素傳遞給ng-for，這與ng-model綁定？

e.g您在數據陣列和陣列columnInfo傳遞和組件呈現的HTML表格

已經有然而，在需求的變化，現在的表需要支持輸入字段。

Textfield 1  Textfield 2   Textfield 3   Input 1  Input 2  

testestestestestsetestsetestestsetestestsetsetsett  *dropdownhere* *textbox here*

的問題

首先和最前端，簡單地顯示在每行的一個「額外的文本框欄」已被證明很難。

我用一個簡單的NG-內容與單選擇

表組件。 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>

來源

2016-12-01 Daniel Cooke

你應該看一看的角2的活性形式的模塊，我認爲這將是一個很好的用例。在Angular 2文檔中有一個很好的演練。反應式表單允許您使用對象以「編程方式」定義窗體。該演練顯示您必須進行設置，以便您可以將一組配置對象（每個對象表示一個輸入）傳遞給一個反應形式指令，並且它將遍歷該數組並根據每個配置對象呈現輸入。它還展示瞭如何從反應形式中獲取數據。

來源

2016-12-01 15:42:26

我一直在使用反應形式，除非我錯過了什麼。當然，反應形式僅用於將現有的輸入元素與TypeScript中的FormControl對象相關聯。我的問題不需要假設輸入元素的類型，FormControl不能創建一個新元素，它只能綁定到模板中的一個現有元素。 –

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html 這是我正在談論的指南。它向您展示瞭如何動態呈現輸入以及如何將它們綁定到控件對象。 –

反應式表單不回答我的問題，它們仍然要求我對HTML元素進行硬編碼。我需要一個通用的方法來渲染表格的tags_中包含的任何HTML元素 –

如何將<input>元素傳遞給ng-for，這與ng-model綁定？

背景

的問題

問題

回答

相關問題