Question

这是一个由两部分组成的问题：

当用户点击 http.StatusBadRequest 按钮时，我需要重复（添加一张新的空卡片）卡片，如下面的代码片段所示。我该怎么做？
我需要将 Add a Card 的值添加到一个数组中（这样我可以稍后使用它来显示）。我该怎么做？
```
inputField
```

TS 文件

 <button (click)="CreateNewCard($event)">Add a Card</button>
     <div class="card">
         <div class="card-body">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria-describedby="name" name="name"  formControlName="name" />

     </div>
 </div>

Answer 1

在你的 HTML 中；

<button (click)="CreateNewCard($event) onSubmit()" >Add a Card</button>

 <div #yourContainer >

     <div class="card" id="card_1">
         <div class="card-body">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria- 
              describedby="name" name="name"  formControlName="name" />
     </div>

 </div>

在您的 TS 文件中；

@ViewChild('titleContainer', { static: true }) public yourContainer: any;

CreateNewCard($event){
this.newCardElem = document.createElement("div");
this.newTitleElem.innerHTML = this.yourCard;
this.yourContainer.nativeElement.appendChild(this.newCardElem);}

onSubmit() {this.yourArray.push(this.form.value); this.idCard++}
idCard: numbre = 1;
yourArray: [] = []
yourCard: string = `<div class="card-body" id="card_${this.idCard}">
            <h5 class="card-title">New Card every click</h5>
            <input type="text" id ="name" class="form-control " aria- 
              describedby="name" name="name"  formControlName="name" />
     </div>`

单击按钮时添加新卡

1 个答案: