How can I delete the any rows in table application Angular 2?

Question

i won`t delete any row in my table on this method:

  deleteRowAdressForm(){
    this.rowDataMainForm.splice(1, 1);
}

  rowDataMainForm = [{
    name: '',
    email: '',
    tel: '',
    adress: '',
    delete: '',
}];

this method delete such first element in row, and i wont delete any rows, in my table

after update and use ChangeDetectorRef, but this dont work yet

this full code:

import {Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';


@Component({
    selector: 'tabletree',
    templateUrl:'app/tabletree.component.html',
})
export class TableTreeComponent{

constructor(private changeDetectorRef: ChangeDetectorRef){

}


rowDataMainForm = [{
    name: '',
    email: '',
    tel: '',
    adress: '',
    delete: '',
}];

rowDataAdressForm = [{
    country: '',
    city: '',
    zipcode: '',
    street: '',
    delete: '',
}];

rowDataHomeForm = [{
    home: '',
    campus: '',
    province: '',
    area: '',
    delete: '',
}];

addRowMainForm(mainFormIndex){
    this.rowDataMainForm.push({
        name: '',
        email: '',
        tel: '',
        adress: '',
        delete: '',
    })
}

addRowAdressForm(){
    this.rowDataAdressForm.push({
        country: '',
        city: '',
        zipcode: '',
        street: '',
        delete: '',
    })
}

addRowHomeCampusProvinceAreaForm(){
    this.rowDataHomeForm.push({
        home: '',
        campus: '',
        province: '',
        area: '',
        delete: '',
    })
}

deleteRowAdressForm(addressFormIndex: number){
    this.rowDataMainForm.splice(addressFormIndex, 1);
    this.changeDetectorRef.detectChanges();
}

deleteRowStreetCityZipcodeForm(delRowStCZFormIndex: number){
    this.rowDataAdressForm.splice(delRowStCZFormIndex, 1);
    this.changeDetectorRef.detectChanges();
}

deleteRowHomeForm(homeFormIndex: number){
    this.rowDataHomeForm.splice(homeFormIndex, 1);
    this.changeDetectorRef.detectChanges();
}

}

and this html


    
        
            Подразделение
        
    


    name
    email
    tel
    adress
    delete


    
    
    
    
            
        
            
            
                country
                city
                zipcode
                street
                
            
            
            
                
                
                
                
                    
                        
                            
                                
                                    home
                                    campus
                                    province
                                    area

Maximilian Riegler · Accepted Answer

You see no updates, because change detection is not running on nested objects in an array. You have two options:

Everytime you change something in the array assign it as a new object, because change detection only looks for reference changes.
Trigger change detection yourself (that's what I will show you, since the first option is self explanatory)

Import ChangeDetectorRef:

import {ChangeDetectorRef} from '@angular/core';

Inject ChangeDetectorRef into your component:

constructor(private changeDetectorRef: ChangeDetectorRef, /* other injections here */) { 
    // ...
}

Use it in your method to detect changes:

deleteRowAdressForm(rowNumber: number){
    this.rowDataMainForm.splice(rowNumber, 1);
    this.changeDetectorRef.detectChanges();
}

Changes you need to make to your template:

On every *ngFor you use, you need to add the index variable like so:

*ngFor="let row of table; let rowIndex = index"

Then in your (click) deletion events you can leverage it like this:

(click)="deleteRow(rowIndex)"

I edited your template here with the usage, but don't forget to add the parameter to your delete functions like I did above!


    
        
            Подразделение
        
    


    name
    email
    tel
    adress
    delete


    
    
    
    
            
        
            
            
                country
                city
                zipcode
                street
                
            
            
            
                
                
                
                
                    
                        
                            
                                
                                    home
                                    campus
                                    province
                                    area

How can I delete the any rows in table application Angular 2?

Answers (2)

Related Questions