web-dev-qa-db-ja.com

配列TypeScriptからオブジェクトを削除します（Angular 2）

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を使用したくありません。ボタンの下にあるこの言語を正確に削除したいからです。手伝って頂けますか？

[編集]新しいコードを追加しようとするたびに（Push）、配列に存在するクラスのデータがクリアされるため、このコードで再び問題が発生しました。何が原因かわかりますか？

htmlangulartypescriptngfor
6
Jędrek Markowski

_<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);
}
_
21
elzoy

spliceではなくsliceを使用する必要があります

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

sliceは配列のセクションを返し、spliceは配列から要素を削除し、必要に応じて、その場所に新しい要素を挿入して、削除された要素を返します

11
PierreDuc