ngFor循环中的角度CSS行/列设计

Question

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

如果输入类型为textarea，则它应位于下一行，否则应位于同一行。

html input from json - Stackblitz Demo

Answer 1

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

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

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

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

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

结果如下：

而且你也可以在你的 stackblitz 演示的以下分支中看到这个工作： https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts