当显示组件报告详细信息时，它显示在菜单下方？

Posted 2023-03-13

【中文标题】当显示组件报告详细信息时，它显示在菜单下方？

【英文标题】：When display component reportdetails it display below menu?

【发布时间】：2020-08-18 07:03:04

【问题描述】：

问题

第二个组件 - 表格 html 显示在菜单下方，但我需要它显示在菜单右侧。

我在 Angular 7 上工作，我有两个组件

第一个组件是左侧菜单中包含的报告组件，它是 app.component 上的路由器出口

第二个组件是table html，存在于reportdetails组件上，点击链接菜单时生成。

第一个组件报告包含菜单

<p>report-category works!</p>

<table *ngFor="let rep of reportlist">  

     <tr>



            <td>rep.reportCategory</td>       

    </tr>

    <tr *ngFor="let subrep of subreportlist">

        <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">



                <a href="/reportdetails?id=subrep.reportID">



                        <i class="subrep.IconClass"></i>

                        <span class="title">subrep.reportName</span>

                    </a>

        </div>



       </tr>



</table>

第二个是报表组件包含显示在菜单下方的表格，这是错误的

我需要的正确方法是如下图所示显示菜单右侧

reportdetails works!

 <p>reportdetails works!</p>

  <div>
<table class="table table-hover" >  
  <thead>  
    <tr>  

      <th>regulation</th>  
    </tr>  
  </thead>  
  <tbody>  
      <tr *ngFor="let rep of reportdetailslist">
        <td>rep.regulation</td>  
      </tr>



  </tbody>  
</table>  
<p>reportdetails works!</p>

      <div>

    <table class="table table-hover" >  

      <thead>  

        <tr>  



          <th>regulation</th>  

        </tr>  

      </thead>  

      <tbody>  

          <tr *ngFor="let rep of reportdetailslist">

            <td>rep.regulation</td>  

          </tr>



      </tbody>  

    </table>  

  </div>

小提琴链接如下： https://jsfiddle.net/015asjzv/1/

我尝试了什么

table
float:right;
width:auto;

最后更新 看这里的链接

http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file

它从左到右移动了桌子，但我需要它在菜单旁边的顶部，所以我该怎么做

【问题讨论】：

你能添加一个工作小提琴吗？

谢谢你的回复如何把小提琴放在里面是有角度的

您可以在stackblitz 或codesandbox 上创建一个工作演示，两者都支持角度

我用小提琴更新了帖子

jsfiddle.net/015asjzv/1

【参考方案1】：

因此，就我目前所看到的而言，您有 2 个由 div 包裹的表格，这就是它们显示为块的原因（div 具有 display: block；默认情况下）

在这 2 个周围添加另一个 div

<div class='wrapper'>
  // You have to make sure only this divs are direct child of wrapper.
  // div table 1  || you can just remove the div and add table directly
  // div table 2  || as divs with no class dont add any value
</div>
// css
.wrapper 
  display: flex;

祝你好运。

您可以了解更多关于 display flex here

注意：这也可能是父组件布局的问题，但修复方法相同。