子组件失去父表格式 [英] Child component loses parent table formatting

问题描述

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

Currently I have a bootstrap table that displays a list of results. I have a button that when pressed I want a new row to appear with inputs at the bottom of the current table. The issue I am having is that the html in my child component doesn't retain the formatting of my parent component's bootstrap table (all three of the <td> rows are crammed into one column on the parent table). Below is my parent component. The child component selector is <app-addBin>. Does anyone know how to get a child component to retain the formatting of the parent compoent's table?

 <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

Here is the html from my child component

                     <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>

推荐答案

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

I found that when trying to add an Angular component to a <tr> element the compiler looks for a <td> element so placing a selector inside the <tr> tag like so <tr><app-addBin></app-addBin</td> will not result in the component rendering inside the table as a <td> but will cram the entire component html template inside one column. By adding an attribute selector (I think that's what this is called) to the component i.e. selector: 'app-addbin, [app-addbin]', you can add the selector directly to the <td> element like so <td app-addBin></td> and now the <td> elements inside the component html template will render correctly inside the table.

这篇关于子组件失去父表格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！