CODEWITHSUNDEEP
javascripthtmlangulartypescript
user11171372
user11171372

Reputation:

How to update a filtered Array after deleting an Item in Angular 7?

I have to delete an item from my array. I did it and it works but only for the full array and not for the filtered one.

HTML

<div class="row no-margin row-padding justify-content-center">
    <div class="col-md-offset-4 col-md-4 col-sm-12 searchbar">
        <input type="text" class="ricerca ng-valid ng-isolate-scope ng-touched ng-dirty ng-valid-parse"
               [placeholder]="placeHolder" [(ngModel)]="searchString" #searchInput
               (keyup)="searchBarKey(searchInput.value)">
        <div class="searchIco"></div>
    </div>
</div>


<div class="row no-margin row-padding">
    <div class="col-md-offset-4 col-md-4 col-sm-12 suggerite" *ngIf="data.length>0">
        <table class="sugtab">
            <tbody>

            <tr class="sugtag ng-scope"  *ngFor="let skill of data | filterAll : searchString">
                <td (click)="addToSearch(skill)" class="skill ng-binding">{{skill.name}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

TYPESCRIPT

data = [];
skillsToAdd = [];
userSkills : Skill[];

addToSearch(skill: Skill) {
    this.skillsToAdd.push(skill);
    this.data.splice(this.data.indexOf(skill),1);

}

So if delete the value in my searchBar, the item that I deleted before will not be shown. The problem is in the moment that I remove it from the filtered array, it remains on screen.

Any suggestions?

UPDATE This works for me!

addToSearch(skill: Skill) {
    this.skillsToAdd = [...this.skillsToAdd, skill];
    this.data = this.data.filter(item => item !== skill);
}

Upvotes: 1

Views: 1114

Answers (1)

mbojko
mbojko

Reputation: 14679

Don't mutate, create new arrays.

    this.skillsToAdd = [...this.skillsToAdd, skill];
    this.data = this.data.filter(item => item !== skill);

Upvotes: 1

Related Questions