如何動態地添加一個組件在一個表格tr forloop在Angular 2中

我有一個循環遍歷每一行的表格。當用戶點擊該行中的鏈接時，我可以在下面創建一個子行。問題是，這個子行，我希望它是一個組件，所以我可以傳遞數據。這可能嗎？如何動態地添加一個組件在一個表格tr forloop在Angular 2中

我的代碼如下 account.component.html

<tr *ngFor="let account of accounts"> 
         <td (click) ="showChildRow($event, account)" >{{ account.name }}</td> 
         <td>{{ account.id }}</td> 
        </tr>

account.component.ts

showChildRow(event:any, account: Object){ 
    var tableId = $(event.target).closest('table')[0].id; 
    var table = $('#' + tableId).DataTable(); 
    var tr = $(event.target).closest('tr'); 
    var row = table.row(tr); 

    if (row.child.isShown()) { 

     $('div.slider', row.child()).slideUp(function() { 
     row.child.hide(); 
     tr.removeClass('shown'); 
     }); 
    } 
    else { 

     this.accountService.getAccountInfo(account.id) 
         .subscribe(
         data => this.format(data, row, tr), 
         error => this.errorMessage = <any>error 
        ) 

    } 
} 


format (data, row, tr) { 

    var childRow = '<div class="slider col-xs-12">'+ 
        '<child-component [data] ="data"></child-component>' //HOW TO DYNAMICALLY ADD COMPONENT? 
       '</div>'; 

    row.child(childRow).show(); 
    tr.addClass('shown'); 
    $('div.slider', row.child()).slideDown(); 
}

來源

2017-02-15 Julian

你需要使用一個屬性選擇，因爲<table>不允許任意標籤

<table> 
    <tr myAccount *ngFor="let account of accounts> 
</table>

@Component({ 
    selector: '[myAccount]', 
    ... 
})

來源

2017-02-15 16:07:59

如何動態地添加一個組件在一個表格tr forloop在Angular 2中

回答

相關問題