如何在动态Angular2中显示另一个组件中的组件

时间:2018-01-17 09:19:05

标签: angular

您好我正在尝试动态地在另一个组件中显示一个组件但是不知道动态地做它...就像我有一些记录(行)并且点击特定记录我需要用该组件替换该记录并执行对该特定记录的一些行动。

有人可以提供给我任何方法。

component.html:

<table>
        <tr *ngFor = "let log of logs">
            <td  *ngIf = "log.selectedLogs.length > 0>
                <div class="card">
                    <div *ngIf = "log.selectedLogs.length > 0">
                        <div class="detail">
                            <table class="table-responsive">
                                <tr *ngFor = "let sl of log.selectedLogs" (click) = "editLog('selectedLogs', sl)">
                                    <td>{{sl.field1}}</td>
                                    <td>{{sl.field2}}</td>
                                    <td>{{sl.field3}}</td>
                                    <td>{{sl.field4 | number: '1.2-2'}}</td>
                                    <td class="text-right">${{sl.field5}}</td>
                                </tr>
                                <tr>
                                    <td colspan="5">
                                        <edit-logs *ngIf="edit"></edit-logs>
                                    </td>
                                </tr>
                                <tr class="total">
                                    <td></td>
                                    <td></td>
                                    <td class="text-right">Total:</td>
                                    <td>{{totalHrs}}</td>
                                    <td class="text-right">${{totalAmount}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>            
                </div>
            </td>
        </tr>
    </table>

此处我尝试在选择任何edit-logs时打开sl组件。我需要使用以前的值显示该组件,并且需要更新日志..

需要帮助。

1 个答案:

答案 0 :(得分:0)

在对此进行更多研究后,我发现手风琴非常适合我的情况。使用bootstrap3为您的angular2应用程序提供简单的手风琴控制。如果你不想在没有bootstrap的情况下使用它 - 只需创建适当的css类。