删除后，Angular2将表行的颜色恢复为原始颜色

Question

使用Angular2，我的主页上有一个带状表格，当您单击一行时，它会更改颜色，再次单击时，将恢复为原始颜色。 当前单击某行时，您可以将其删除。 我的问题是，当我删除不是最后一行的行时，在删除该行之后，该行之后的行将更改颜色。

例如，如果我单击并删除第2行，则在删除第2行之后，第3行将以更改后的颜色突出显示。 我想要的是删除后没有要突出显示的行。 请记住，第3行只是通过具有突出显示的颜色而被单击显示，但是在代码中没有任何行以编程方式表示为突出显示。

表格所在的主页上的HTML（ #015939绿色是我的突出显示颜色，默认情况下偶数行是white ，默认行是#d3d3d3灰色），其后是带有选择器deletebutton的delete button child组件的标签：

mainpage.component.html

<tr *ngFor="let dPoint of theData; let idx=index; let even=even" (click)="onClick(dPoint, idx)" (row)="received($event)"
      [style.backgroundColor]="clickedRow == idx ? '#015939' : (even ? 'white' : '#d3d3d3')" [style.color]="clickedRow == idx ? 'white' : '#015939'">
    <td>{{dPoint.tDataPoint}}</td>
    <td>{{dPoint.tICCP}}</td>
    <td>{{dPoint.tStartDate}}</td>
    <td>{{dPoint.tEndDate}}</td>
</tr> 

<deletebutton [receivedRow]='toSend'></deletebutton>

按钮的HTML，该按钮删除被单击的行

deletebutton.component.html

//this HTML is represented by using deletebutton tag above
<button type="submit" class="btn" data-dismiss="modal" (click)="delete()" class="btn icon-trash tableButton"></button>

我主页上的Typescript函数，它发出被单击的行：

@Component({
  selector: 'main-page',
  styleUrls: ['../app.component.css'],
  templateUrl: 'mainpage.component.html'
})


export class MainPageComponent implements OnInit {

  clickedRow:number;
  toSend:DataTable;
  @Output() row: EventEmitter<any> = new EventEmitter<any>(); 

  onClick(message:DataTable, idx:any){
    let d = message.tDataPoint;
    let i = message.tICCP;
    let s = message.tStartDate;
    let e = message.tEndDate;
    if(this.clickedRow == idx) {
      this.clickedRow = -1;
      this.toSend = null;
    } else {
      this.clickedRow = idx;
      this.toSend = new DataTable(d, i, s, e);
    }
    this.row.emit(this.toSend);
  }

使用Typescript函数删除单击的行（我的主页的子组件）：

@Component({
 selector: 'deletebutton',
 templateUrl: './deletebutton.component.html',
 styleUrls: ['../app.component.css']
})
export class DeletebuttonComponent implements OnInit {
  @Input() receivedRow:DataTable;

  delete(){
    var count = 0;
    var length = DPS.length;
    if (this.receivedRow != null) {
      for (let entry in DPS) {
        if (DPS[entry].tDataPoint === this.receivedRow.tDataPoint) {
          DPS.splice(parseInt(entry), 1);
        } else if ((count === (length-1)) && (DPS[entry].tDataPoint !== this.receivedRow.tDataPoint)) {
            alert("Please select a row first");
        } else if (count !== length) {
            count = count + 1;
        }
      }
    }
  }
}

单击或删除任何内容之前的表：

选择第2行后的表格：

第2行之后的表被删除：

删除一行后，我只需要将表变成白色和灰色行。 请注意，在第三个屏幕截图中，如何突出显示新的第2行（以前是第3行）

我尝试使用@Input和@Output以某种方式发送在删除上一行后将突出显示的行以更改this.clickedRow但似乎无法确定逻辑。

Answer 1

您甚至不需要在mainpage.component.html使用deletebutton 。 只需将其替换为button的HTML。

<button type="submit" class="btn" data-dismiss="modal" (click)="delete()" class="btn icon-trash tableButton"></button>

然后移动delete从功能deletebutton打字稿你的mainpage打字稿，并添加行this.clickedRow = -1; 并将receivedRow到的toSend更改为像这样发送

delete(){
  var count = 0;
  var length = DPS.length;
  if (this.toSend != null) {
    for (let entry in DPS) {
      if (DPS[entry].tDataPoint === this.toSend.tDataPoint) {
        DPS.splice(parseInt(entry), 1);
        this.clickedRow = -1;
        this.deleted = true;
      } else if ((count === (length-1)) && (DPS[entry].tDataPoint !== this.toSend.tDataPoint)) {
        alert("Please select a row first");
      } else if (count !== length) {
        count = count + 1;
      }
    }
  }
}  

这样，在选择一行并单击button ，可以从相同的Typescript调用delete函数，而不必在两个单独的组件之间工作。