javascript - 在 UI 上重新定位动态呈现的元素

Question

我正在构建一个 Angular 响应式表单。我正在引入一个 api 并使用 *ngFor 遍历我的元素。

我渲染了 3 个单选按钮。如果选择"is"单选按钮，它会显示一个额外的文本框，并在选择其他单选按钮时再次隐藏。

问题是我希望文本框直接出现在单选按钮下方，但是由于它们是动态的，它们都共享文本框之前的相同 div 位置。

例如

<div><input type="radio" value="yes" /><div>
<div><input type="radio" value="no" /><div>
<div><input type="radio" value="maybe" /><div>
<textarea />

期望的结果。

<div><input type="radio" value="yes" /><div>
 <textarea />
<div><input type="radio" value="no"/><div>
<div><input type="radio" value="maybe"/><div>

有什么方法可以操纵 dom 以获得预期的效果吗？

这是一个 StackBlitz 示例 - https://stackblitz.com/edit/angular-pmupp3?file=src/app/personal/personal.component.html

Answer 1

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
        <div class="col-md-8" *ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes' && item.section === 'yes'">
          <div class="col-md-8" >
                <input type="text" formControlName="title"   class="form-control" placeholder="Title">
        </div>
       </div>
      </div>
    `

您可以在循环内部检查 item.section 是否为“yes”以及是否选择了 yes 值。 stackblitz 链接:https://stackblitz.com/edit/angular-jn3ln6?file=src%2Fapp%2Fpersonal%2Fpersonal.component.html