Question

使用Angular2，我的主页上有一个条纹表，当你点击一行时它会改变颜色，当再次点击时，它会回到原来的颜色。当前单击某行时，您可以将其删除。我的问题是，当我删除不是最后一行的行时，删除该行后，其后面的行具有更改的颜色。

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

我的主页上的HTML（#015939绿色是我的高亮颜色，默认情况下行为white，默认情况下奇数行为#d3d3d3灰色，后跟带选择器deletebutton的删除按钮子组件的标记：

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行后的表格：

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

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

Answer 1

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

的HTML

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

然后将delete函数从deletebutton Typescript移至您的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后，delete函数将从相同的Typescript中调用，而不必在两个单独的组件之间工作。

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

1 个答案: