从数组打字稿中删除对象（Angular 2）

Posted 2023-03-05

【中文标题】从数组打字稿中删除对象（Angular 2）

【英文标题】：Remove object from array typescript(Angular 2)

【发布时间】：2017-12-16 19:40:16

【问题描述】：

我只是尝试从 typescript 中的数组中删除对象，在 angular 2.4.0 中，让我展示代码，它是我的 html 文件：

button type="submit" (click)="addAnotherLanguague()" >Add non native languague</button>
<li *ngFor="let languague of listOfLanguagues;">
     <div class="form-item form-item--text">
           <label class="label invisible">Years studied</label>
           <input type="number" min="0" [(ngModel)]="languague.yearsStudied" name="years"  placeholder="Years studied"/>
     </div>
<button type="submit" (click)="removeLanguague(languague)" >Remove</button> // here you can see use of method
</li>

还有component.ts

(...)
this.listOfLanguagues = new Array <LanguagueInformationData>();
    
addAnotherLanguague()
        this.listOfLanguagues.push(new LanguagueInformationData);
    
    removeLanguague(languague)
        this.listOfLanguagues.slice(this.listOfLanguagues.indexOf(languague), 1);
    
(...)

添加效果很好，但是我尝试了所有删除方法，但仍然不知道如何转移该语言的引用，我不想使用 .pop，因为我想完全删除该语言，下面是按钮。 你能帮帮我吗？

[编辑] 我再次遇到了这段代码的问题，因为每次我尝试添加新语言（推送）时，它都会清除我在数组中存在的类的数据，你知道是什么原因造成的吗？

【问题讨论】：

remove item from stored array in angular 2的可能重复

我编辑了一点我的问题，新问题的原因

【参考方案1】：

你必须使用splice 而不是slice

this.listOfLanguagues.splice(this.listOfLanguagues.indexOf(languague), 1);

slice 返回数组的一部分，splice 从数组中删除元素，并在必要时插入新元素，返回删除的元素

【参考方案2】：

<li *ngFor="let languague of listOfLanguagues; let i = index">

<button type="submit" (click)="removeLanguague(languague, i)" >Remove</button>

removeLanguague(languague, index)
    this.listOfLanguagues.splice(index, 1);

【讨论】：

不使用为什么要传递语言参数？

@Ricardo Gellman IMO 语言对象在您进行服务调用以从数据库中删除语言时也需要。