Question

我正在尝试做我认为很简单的任务，但似乎无法弄清楚，所以也许不可能。

我有一个要迭代的对象，并且该对象具有两个属性

export class OptionLine {
  lineCode: number;
  lineDescription: String;
}

我希望LineCode成为第1列，而LineDescription成为第2列

我最近的尝试如下：

<div class="config-options-box">
  <div *ngFor="let optionLine of optionLines">
     <div class="config-options-line-name">{{optionLine.lineCode}}</div>
     <div class="config-options-line-choices">{{optionLine.lineDescription}}</div>
  </div>
</div>

CSS：

.config-options-box { display: grid; grid-template-columns: 300px 600px; grid-gap: 10px; } .config-options-line-name { grid-column-start: 1; grid-row-end: span 1 } .config-options-line-choices { grid-column-start: 2; grid-row-end: span 1 }

但这最终导致第一个单元格中的第1项包含第2行，第二个单元格中的第2项具有第2行（第1行第2列），等等。

这有可能吗？

Answer 1

弄清楚，我可以在主网格的每一列内显示一个子网格。因此，主网格为1行x 2列，然后每列内部都有一个网格，为n行x 1列。可能不是最有效的解决方案，但我应该少于20个项目，所以我想这会很好。

<div class="config-options-box">
  <div class="config-options-names">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineCode}}</div>
    </div>
  </div>
  <div class="config-options-descriptions">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineDescription}}</div>
    </div>
  </div>
</div>


.config-options-box {
  display: grid;
  grid-template-columns: 300px 600px;
  grid-gap: 10px;
}

.config-options-subgrid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
}

跨多个列的角度CSS网格对象

1 个答案: