从数组打字稿中删除对象(Angular 2)

时间:2017-07-12 11:37:48

标签: html angular typescript ngfor

我只是尝试在typescript中删除数组中的对象,在角度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,因为我想删除下面的按钮正好删除这个语句。 你能救我吗?

[编辑] 我用这段代码再次遇到问题,因为每当我尝试添加新的语言(推送)时,它会清除我在数组中存在的类的数据,你知道是什么原因引起的吗?

2 个答案:

答案 0 :(得分:14)

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

答案 1 :(得分:9)

您必须使用splice而不是slice

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

slice返回数组的一部分,splice从数组中删除元素,如有必要,在其位置插入新元素,返回已删除的元素