Question

目前，我有一个引导程序表，其中显示结果列表。我有一个按钮，当按下该按钮时，我希望新行出现，并在当前表的底部显示输入内容。我遇到的问题是我的子组件中的html不能保留我的父组件的引导表的格式（<td>行中的所有三行都挤到了父表的一列中）。以下是我的父组件。子组件选择器为<app-addBin>。有谁知道如何获取子组件来保留父组件表的格式？

 <table class = 'table'> 
            <thead><!--Start of affected code-->
                <tr>
                    <th>Bin ID</th>
                    <th>Exclude MRB Xfer</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                 <tr *ngFor= 'let value of values' >
                    <td class="binId" align="align-left" >{{value.binId}}</td>
                    <td>
                        <button type="button" class="btn btn-success" name='excludeMrbxfer' 
                        [(ngModel)] = "values.excludeMrbxfer" (click)='toggleChange(value)'>
                        {{value.excludeMrbxfer | yesNo}}</button>   
                    </td>
                    <td>
                        <button type="button" class="btn btn-success" name='status' 
                        [(ngModel)] = "values.status" (click)='toggleChangeStatus(value)'>
                        {{value.status | status}}</button> 
                    </td>
                 </tr>
                 <tr *ngIf="isFoo"><app-addBin></app-addBin><tr>
                        <button type="button" class="btn btn-primary" name='status' (click)="isFoo =!isFoo"
                        >{{isFoo ? 'Cancel' : 'New'}}</button>   
                    </tr>

这是我的子组件中的html

                     <td>
                         <select >
                            <option *ngFor='let value of values' [value]='values.binId'>{{value.binId}}</option>
                        </select>
                    </td>
                    <td><button type="button" class="btn btn-success" name='excludeMrbxfer' 
                        [(ngModel)] = "newBin.excludeMrbxfer" (click)='toggleChange(newBin)'>
                        {{newBin.excludeMrbxfer | yesNo}}</button> </td>
                    <td><button type="button" class="btn btn-success" name='status' 
                        [(ngModel)] = "newBin.status" (click)='toggleChangeStatus(newBin)'>
                        {{newBin.status | status}}</button> </td>

Answer 1

我发现，当尝试向<tr>元素中添加Angular组件时，编译器会寻找<td>元素，因此将选择器放置在<tr>标记内，就像{{1} }不会导致表中的组件呈现为<tr><app-addBin></app-addBin</td>，而是将整个组件html模板填充到一列中。通过向组件即<td>添加属性选择器（我认为这就是所谓的名称），您可以像selector: 'app-addbin, [app-addbin]',这样将选择器直接添加到<td>元素，现在添加到{{1 }}组件html模板中的元素将在表格中正确呈现。

子组件失去父表格式

1 个答案: