Question

我必须从阵列中删除一个项目。我做到了，但它只适用于整个数组，而不适用于经过过滤的数组。

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

}

因此，如果删除我的searchBar中的值，则不会显示我之前删除的项目。问题是当我从过滤后的数组中删除它时，它仍然保留在屏幕上。

有什么建议吗？

更新这对我有用！

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

Answer 1

不要变异，创建新的数组。

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

在Angular 7中删除项目后如何更新过滤后的数组？

1 个答案: