我是棱角分明的新人。我正在使用打字稿。 我想完成这项任务。
Here is the image of what I want do.
我想在添加按钮单击时添加日期和位置选择器。我实际上是这样做的,但是当我删除它的行时,我无法维护它的数据。
这是我在html中所做的:
<div id="" *ngFor = "let sp of specialityElementCount">
<select id="specialityDate"
class="textField"(change)='selectSpecialityDate($event.target.value)'>
<option>Select Date</option>
<option *ngFor = "let date of spDates"
[value]="date">{{date}}</option>
</select>
<select class="textField"
[ngClass]="{'specialityLocation':(sp=='speciality1'),'specialityLocationRemove':(sp!='speciality1')}"
(change)='selectSpecialityLocation($event.target.value, sp)'>
<option>Select Location</option>
<option *ngFor = "let location of specialityLocation"
[value]="location">{{location}}</option>
</select>
<div class= "removeImgDiv"[hidden]="sp=='speciality1'">
<img class="removeImg" (click)="removeRow(sp)" src="../../assets/img/remove.png">
</div>
</div>
这就是我在打字稿中所做的:
specialityElementCount = ["speciality1"];
addRow(row:string){
console.log(row);
if(row.includes("speciality")){
this.specialityElementCount.push("speciality"+(this.specialityElementCount.length+1));
}
}
removeRow(row){
console.log(row);
if(row.includes("speciality")){
this.specialityElementCount.splice(this.tripLocations.indexOf(row), 1);
}
}
selectSpecialityDate(event){
console.log(event);
}
selectSpecialityLocation(event, text){
console.log(event);
console.log(text);
}
请帮我解决这个问题。当我删除行时,它会删除正确的行,而不是每次都删除最后一行。
提前致谢。
答案 0 :(得分:1)
您可以使用* ngFor生成的索引,而不是自己搜索行。
它看起来像这样:
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
你可以看到一个带有示例here的工作插件。