Angular 角度4/5删除特定索引处的子元素

我有一个type=“number”的输入标签。当我递增number时，它会在div中插入/添加元素。现在我想删除递减时的最后一个元素。我该怎么做

HTML代码：-

<input class="form-control" (click)="bedroomClick($event)" type="number" value="0" min="0">
<div class="row bedding-configuration" #bedding_config>
</div>

当输入计数器增加1时，CreateBedingConfigElements（）==>在div内添加元素。我想要的是在计数器减1时删除最后一个元素。

您可以使用（输入）指令捕获该事件，并推送或拼接div数组以获得正确的div数。示例代码：

在component.html中

<input type="number" value="0" min="0" (input)="addDiv()" [(ngModel)]="divsNumber">

<div *ngFor="let div of divs">div {{ div }}</div>

div{{div}

---

In component.ts

divs: Array<number> = [];

oldDivsNumber: number = 0;
divsNumber: number = 0;

addDiv = () => {
    if (this.divsNumber > this.oldDivsNumber) {
        this.divs.push(this.divs.length + 1);
    } else {
        this.divs.splice(this.divs.length - 1, 1);
    }
    this.oldDivsNumber = this.divsNumber;
}

divs:Array=[]；
oldDivsNumber:number=0；
divsNumber:number=0；
addDiv=（）=>{
如果（this.divsNumber>this.oldDivsNumber）{
此.divs.push（此.divs.length+1）；
}否则{
此等分拼接（此等分长度-1,1）；
}
this.oldDivsNumber=this.divsNumber；
}

---

您可以查看实时版本。

为什么不在适当的时候使用*ngIf来显示呢

<input class="form-control" (click)="bedroomClick($event)" type="number" 
 value="0" min="0">

<div class="row bedding-configuration" #bedding_config *ngIf="showBeddingConfig">
</div>

在您的代码中，只需在bedroomClick（）中将showBeddingConfig设置为true或false，我就是这么做的

component.ts中的代码=>

previousBedRoomValue : number = 0;

bedroomClick(event) {

  if(event.target.value > this.previousBedRoomValue ) {
    const control = <FormArray>this.addresidenceForm.controls['bedroom_config'];
    control.push(this.initBedroomConfiguration());
  }
  else {
    const control = <FormArray>this.addresidenceForm.controls['bedroom_config'];
    control.removeAt(event.target.value);
  }
  this.previousBedRoomValue = event.target.value;
}

previousbeddroomvalue:number=0；
卧室点击（事件）{
如果（event.target.value>this.previousBeddroomValue）{
const control=this.addresidenceForm.controls['dombery_config']；
control.push（this.initbeddroomconfiguration（））；
}
否则{
const control=this.addresidenceForm.controls['dombery_config']；
control.removeAt（event.target.value）；
}
this.previousBedRoomValue=event.target.value；
}

html文件中的代码

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 grid-margin">
  <div class="make-center mb-4 mt-4"></div>
  <input class="form-control" name="bedrooms" (click)="bedroomClick($event)" type="number" value="0" min="0">
  <label for="bedrooms">Bedrooms</label>
</div>

卧室

单击事件时，它会在html页面中添加元素

<div [hidden]= "i == 0" *ngFor = "let bedRoom of addresidenceForm['controls'].bedroom_config['controls']; let i = index" class="col-xl-6 col-lg-6 col-md-6 col-sm-12 grid-margin" >
  <div [formGroupName]="i" class="loop-beddingSection">
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 grid-margin">
        <label for="bedRoom"><sup class="orange-color">*</sup>Bedroom Name</label>
        <input class="form-control" type="text" name="bedroom_name" formControlName="bedroom_name">
      </div>
    </div>
  </div>
</div>

*卧室名称

这是图片

---

请分享您迄今为止尝试或完成的代码示例。我分享了html代码示例。在这里，当我点击输入标签的向下箭头时，它应该删除div中的最后一个元素。谢谢你们的回答。它在浏览器中显示[object HtmlDevice]。在上面的示例中，div是文本。在我的例子中，它应该创建元素并将其插入DOM。请问您为什么要将其插入DOM？您可以在div中添加html，也可以插入一些动态数据。对不起，这不是DOM，而是html。我想在HTML中插入创建的元素。我使用Renderr2创建了html元素，还可以将其插入html中。删除元素时出现问题。您展示的示例将div作为文本而不是标记。如果您在递增时使用输入标记这样的方式显示它，它会在div中添加输入标记，并在递减时删除它（使用后进先出方法），这会对我有所帮助。我得到了解决方案。我创建了一个新的示例（），动态创建了输入，您可以在divs数组中获取该输入文本的值。我已将一个divs数组转换为包含数字（divs number）和输入（输入文本）的对象。我还在底部添加了一个调试json打印，这样您就可以看到在向输入写入内容时发生了什么。当用户单击向上箭头时，元素是动态创建的。

<div [hidden]= "i == 0" *ngFor = "let bedRoom of addresidenceForm['controls'].bedroom_config['controls']; let i = index" class="col-xl-6 col-lg-6 col-md-6 col-sm-12 grid-margin" >
  <div [formGroupName]="i" class="loop-beddingSection">
    <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 grid-margin">
        <label for="bedRoom"><sup class="orange-color">*</sup>Bedroom Name</label>
        <input class="form-control" type="text" name="bedroom_name" formControlName="bedroom_name">
      </div>
    </div>
  </div>
</div>