javascript - 在UI上重新放置动态渲染的元素

我正在建立一个角反应形式。我正在插入一个api，并使用*ngFor遍历元素。

我已经渲染了3个单选按钮。如果选择“是”单选按钮，它将显示一个附加文本框，并在选择其他单选按钮时再次隐藏。

问题是我希望文本框直接显示在单选按钮的下方，但是由于它们是动态的，它们都共享与文本框前面相同的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

最佳答案

    <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