ngFor 循环中的 Angular CSS 行/列设计答案

【问题标题】：Angular CSS row/col design in ngFor loopngFor 循环中的 Angular CSS 行/列设计
【发布时间】：2019-04-21 10:37:54
【问题描述】：

如何根据 *ngFor 中的条件对齐行/列中的项目。

如果输入类型是textarea，那么它应该在下一行，否则在同一行。

【问题讨论】：

【解决方案1】：

你想要做的很简单，你只需要在div 中添加一个额外的类，你正在使用*ngFor 进行迭代，如下所示：

   <div
    *ngFor="let prop of objectProps"
    [ngClass]="{ 'same-line': prop.type !== 'textarea' }"
  >

然后您可以使用该类将元素的显示设置为 inline-block 以便它不会进入下一行，如下所示：

  .same-line {
    display: inline-block;
    width: 50%;
  }

（请注意，我还需要指定宽度，因为这需要在这里知道）

这是结果：

【讨论】：