在角度按钮上添加两个选择标记的div?

时间:2017-07-02 12:55:42

标签: html angular typescript

我是棱角分明的新人。我正在使用打字稿。 我想完成这项任务。

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);
  }

请帮我解决这个问题。当我删除行时,它会删除正确的行,而不是每次都删除最后一行。

提前致谢。

1 个答案:

答案 0 :(得分:1)

您可以使用* ngFor生成的索引,而不是自己搜索行。

它看起来像这样:

<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>

你可以看到一个带有示例here的工作插件。