表中角度爲2的組件中的行

我想使呈現爲多個錶行的角度2中的TableRowsComponent。表中角度爲2的組件中的行

我想在這樣的一個模板來使用它：

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

（因此，「錶行」將是這裏的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>

不幸的是，< table-rows>元素混淆了表格的渲染。如何解決這個問題呢？有沒有辦法讓angular2不能渲染<錶行>元素？

來源

2016-07-25 Ward Beullens

你可能想看看這個http://stackoverflow.com/questions/38463346/angular2-formgroup-inside-tr-child -component/38470631＃38470631 –

感謝您的參考。這幾乎是一個很好的解決方案，但是如果您檢查plunkr，那麼解決方案中的每個< tr > ... < /tr >都在其自己的< tbody > ... < /tbody > :( –

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); 
     } 
    }

來源

2017-01-07 10:13:01 InderMoga

）這很好，您提供瞭解決方案，但答案應始終包含一些解釋以及代碼。謝謝！ – Alex

儘管這段代碼片段是受歡迎的，並且可能會提供一些幫助，但如果它包含一個解釋，它會[大大改進]（// meta.stackexchange.com/q/114762）*如果沒有這個答案，你的答案就沒有什麼教育價值了 - 記住你將來會爲讀者回答這個問題，而不僅僅是這個人現在問的問題！請[編輯]你的回答以添加解釋，並給予表明適用的是什麼限制和假設。 –

命名您的選擇時，你可以使用[table-rows]而非table-rows。

例如

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

，然後只需在TBODY標籤內使用它，ALA <tbody table-rows></tbody>

來源

2017-03-01 14:46:13 thunk

表中角度爲2的組件中的行

回答

相關問題