嗨,我有一个简单的Angular组件的问题,我使用一个反应式的形式插入文本,然后我循环ngFor的结果
TEMPLATE
<form [formGroup]="colorsForm">
<div>
<label for="colorName">Color Name</label>
<input id="colorName" type="text" class="form-control"
formControlName="colorName" name="colorName"/>
</div>
<button type="button" (click)="addCorlo()">ADD</button>
</form>
<ul>
<li *ngFor="let color of colorsList">{{ color.colorName }} <button (click)="delete()">DELETE</button></li>
</ul>
TS
import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Reactive Form';
colorsForm: FormGroup; // New Reactive Form
colorsList: any[] = [];
constructor(
private fb: FormBuilder
) { }
ngOnInit() {
this.colorsForm = this.fb.group({
colorName: [null]
});
}
addCorlo() {
if (this.colorsForm.valid) {
let color = {
colorName: this.colorsForm.value.colorName,
};
this.colorsList.push(color);
}
this.colorsForm.reset();
}
delete(){
console.log('delete')
}
}
我试图删除该元素,但我没有成功......。
这是一个stackblitz的例子 示例链接
在app.component.html中,您可以添加 let i = index
到ngFor。这是为了给每个元素分配一个索引。然后你可以将 i
到删除功能 (click)="delete(i)"
.
<li *ngFor="let color of colorsList; let i = index;">{{ color.colorName }} <button (click)="delete(i)">DELETE</button></li>
在app.component.ts中,你可以使用split方法从一个数组中删除一个元素。在这种情况下,splice方法接受2个参数,第一个参数是你要删除的项的位置,第二个参数是要删除的项的数量。第一个参数是你要删除的元素的位置,第二个参数是要删除的元素的数量。
delete(i){
this.colorsList.splice(i, 1);
}
下面是在Stackblitz中编辑的代码的链接。https:/stackblitz.comeditexample-reactive-form-f1auz8。
你会想要计算ngFor中的索引。
<li *ngFor="let color of colorList; let i = index">....
把索引i传给方法,然后根据这个索引从数组中删除。
这里有一个不错的参考。https:/www.angularjswiki.comangularhow-to-get-index-of-element-in-ngfor-angular
希望对你有所帮助。
编码快乐!