Angular *ngFor 如何在左右两侧堆叠元素标签？答案

【问题标题】：Angular *ngFor Howto stack element tag with left and right on respective sides?Angular *ngFor 如何在左右两侧堆叠元素标签？
【发布时间】：2022-02-14 10:34:44
【问题描述】：

Expected left to be stacked top left and right top right

[需要将名字左边右边右边的元素堆叠起来使用单个 *ngFor div/ ul /table 任何方式...... 下面提供的示例游戏] https://stackblitz.com/edit/ngfor-index-example-wntaie?file=app%2Fapp.component.html

【问题讨论】：

标签： css angular typescript

【解决方案1】：

您可以根据条件添加类。

所以对于你的 stackblitz 示例，我会这样写。

<div class="container" *ngFor="let course of courses; index as i">
  <div [ngClass]="{'leftsec': courses[i].name == 'left',
  'rightsec': courses[i].name == 'right'}">
    {{course.name}}
  </div>
</div>

【讨论】：

我尝试了这种方法，但可以找到解决方案，在左右两端分别堆叠，有人可以分叉并分享解决方案吗？
@Rahul 只是你所缺少的 css 吗？你们其他人的 stackblitz 看起来还不错。
是的Css，问题，我尝试了很多方法
任何可用的解决方案

【解决方案2】：

欢迎@Rahul Krishnakumar！由于我们谈论的是列表项，您可以尝试此解决方案。

P.S 不小心把它保存到你的 stackblitz 中了。对此感到抱歉。

https://stackblitz.com/edit/ngfor-index-example-b2ysbk?file=app%2Fapp.component.html

<div>
  <ul>
  <li
    *ngFor="let course of courses; index as i"
    [ngClass]="courses[i].name == 'left' ? 'leftsec' : 'rightsec'"
  >
    {{ courses[i].name + ' ' + courses[i].id }}
  </li>
</ul>
</div>

样式

.leftsec {
  float: left;
  padding: 10px;
  background-color: red;
}

.rightsec {
  float: right;
  padding: 10px;
  background-color: blue;
  color: white;
}

ul {
  list-style: none;
  display: flex;
  flex-flow: column wrap;
  height: 16em;
}

li {
  padding: 1em;
  margin: 2px;
}

【讨论】：

嗨，没关系，**但是在添加更多具有左右值的元素时，它不能正确堆叠。**请参考下面的链接，link
嗨拉胡尔，i.postimg.cc/vZX6Crf0/lists.png。也许它取决于屏幕。这就是我的样子。如果你想要更多元素，你可以改变
嘿@DeanTwit - 此解决方案仅适用于 height: 16em;
嘿@DonaldDuck，它当然做到了。这正是被问到的。 Ofc，它可以做得更优雅，适用于所有设备，但我认为初学者在这个方向上付出一些努力也是一样的，关于 height ，你可以在这里阅读更多关于相对单位的信息：developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/… . REM 基于字体大小。因此，在某些情况下，16 rem ofc 会有所不同。

【解决方案3】：

试试这个

https://stackblitz.com/edit/ngfor-index-example-jkkeue?file=app/app.component.html

您使用display: flex 和flex-direction: row 的想法是正确的

我为 leftCourses 和 rightCourses 添加了一个 getter 来稍微清理一下代码。

【讨论】：