在网格行之间单击时插入组件答案

【问题标题】：Inserting component on click between grid rows在网格行之间单击时插入组件
【发布时间】：2021-01-23 06:30:42
【问题描述】：

我有一个项目网格，当我单击其中一个时，我想显示另一个组件，该组件占据所单击项目下行的所有宽度。

这是我想要实现的目标的图片

我有一个按钮列表组件，其中包含一个按钮组件，它使用 ngFor 显示我的项目。当我点击一个项目时，尺寸选择组件会显示一个 ngIf。

我的问题是，如果我在按钮列表组件中有大小选择组件，它会附加在网格的末尾，如果我在按钮组件中有这个新组件，那么它只需要包含被点击项的列的宽度。

如果我把它放在绝对位置，我可以使它成为容器的宽度，但是以下项目不会下降。

这是我的一段代码

按钮列表

<div class="wrapper">
  <div class="container">
    <app-button *ngFor="let button of buttons;" [button]="button" (buttonClicked)="onButtonClicked($event)">
    </app-button>
  </div>
</div>

.container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(250rem, 1fr));
  grid-gap: 10rem;
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 10rem;
}

按钮

<div class="product">
    <div class="product-col">
        <h2 class="product_title" (click)="onButtonClicked()">{{button.Caption}}</h2>
        <img class="product_img" [src]="picture" alt="" (click)="onButtonClicked()">
        <span class="product_price" *ngIf="button.Price && button.Price != '0'">{{button.Price / 100 | currency}}</span>
    </div>
</div>

<app-size-selection-button-list *ngIf="isSizeSelectionOpen"></app-size-selection-button-list>

如何才能做到这一点？也许 CSS 中有一个解决方案，或者可能有另一种方法可以将我的组件插入到可行的项目网格中。

谢谢

【问题讨论】：

标签： css angular

【解决方案1】：

您不必附加 div，您可以创建和隐藏它，当用户将鼠标悬停在项目 div 上时，您可以显示它并将其子标签的 innerHTML 设置为您需要的任何内容，就像这样

<body>
    <p onmouseover="show();"></p>AA</p>
    <div style="width:100%">
        <div style="width:33%">
            <p>Name</p>
        </div>
        <div style="width:33%">
            <p>Name</p>
        </div>
        <div style="width:33%">
            <p>Name</p>
        </div>
    </div>
    <div id="blah" style="display:none">
        <!-- whatever here -->
    </div>
<script>
    function show() {
        var b=document.getElementById("blah");
        b.style.display="block";
        // Change some innerHTML of elements inside the blah div here
    }
</script>

【讨论】：

实际上我没有问题显示新组件我使用 ngIf 执行此操作，我无法在单击项目之后的下一行显示它，如图中所示。感谢您的回复。
很抱歉我的回复迟了，但我完全不明白你的确切问题是什么。你的意思是 div 没有显示在下一行？如果是这样，请将 display:block 添加到您遇到问题的 div 上的 div