Angular2在刪除後將表格行的顏色恢復爲原始狀態

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> 

打字稿功能，其發射被點擊的行：

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

打字稿功能刪除點擊行（我的主要頁面的子組件）：

@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

你甚至不需要在mainpage.component.html中使用deletebutton。只需將其替換爲button的HTML即可。

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

然後從deletebutton打字稿將您delete功能，以您的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調用，而不必在兩個單獨的組件之間工作。