Angular 嵌套CSS和 Div表对齐问题怎么解决？
Angular 嵌套CSS和 Div表对齐问题怎么解决？
提问于 2018-07-31 01:08:40
我试图创建自己的Angular的树表，但我的问题是，列是不正确的对齐。我能够成功地递归调用组件，但它以错误的格式显示。基本上，我有以下几点：
- 父组件
- Has Table Header Information
- Calls row component (node of tree table)
- 节点组件
- Has table row information
- Calls itself
下面是在实践中的样子
父组件
<div style="display:table;">
<div style="display: table-header-group; font-weight:bold;">
<div style="display:table-cell;padding 3px 10px;">Column A</div>
<div style="display:table-cell;padding 3px 10px;">Column B</div>
<div style="display:table-cell; padding 3px 10px;">Column C</div>
</div>
<div style="display:table-row-group">
<childselector [childinformation]="informationarray"></childselector>
</div>
</div>子组件
<div style="display: table-row;">
<div style="display:table-cell; padding 3px 10px;">{{Content A}}</div>
<div style="display:table-cell; padding 3px 10px;">{{Content B}}</div>
<div style="display:table-cell; padding 3px 10px;">{{Content C}}</div>
</div>
<ng-container *ngIf="child.informationarray.length>0">
<childselector [childinformation]="child.informationarray"></childselector>
</ng-container**注意：上面是伪代码，但我希望你能理解。下面的CSS问题出现了-而不是像这样出现的表格：
|Column A |Column B |Column C|
......................................
|Row1-A |Row1-B |Row1-C |
......................................
|SubRow1-A |SubRow1-B |SubRow1-C|看起来是这样的：
|Column A |Column B |Column C|
.............................................................
|Row1-A |Row1-B |Row1-C |
.............................................................
|SubRow1-A |SubRow1-B |SubRow1-C| |回答 1
Stack Overflow用户
发布于 2018-07-31 10:58:36
这里的问题是subrow组件被包装在DOM中(<subrow>[...]</subrow>)，你会失去显示表的功能。
这里的解决方案是使用属性选择器：
@Component({
selector: '[subrow]'
...
})然后用它就像
<div style="display: table-row;" subrow></div>相反<subrow></subrow>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008730
复制相关文章
相似问题