我正在创建视图以添加多个位置或使用ViewContainerRef删除。而cloneTemplate方法所有输入值都重置并且removeTemplate方法索引变得不正确并且说未定义索引....并且相同。这是一种正确的方式或缺少什么?请帮帮我..
@Component({
selector: 'something',
template: `
<form #createForm="ngForm" class="form-horizontal" (submit)="submitData(createForm);">
<ng-template #clone let-index="index">
<div class="col-md-6">
<div class="form-group">
<label>Interview Location</label>
<input type="text" class="form-control" name="interviewLocation" [(ngModel)]="data.interview[index].interviewLocation" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<label>Remove</label>
<button type="button" class="btn btn-sm btn-danger" (click)="removeTemplate(data.interview[index], this.index)">
<i class="fa fa-remove"></i>
</button>
</div>
</div>
</div>
</ng-template>
<div #container></div>
<div class="add-more">
<button type="button" class="btn btn-sm btn-primary" (click)="cloneTemplate()">
<i class="fa fa-plus"></i>
</button>
</div>
<button type="submit" class="btn btn-gap btn-primary" [disabled]="createForm.invalid">Submit</button>
</form>
`
})
export class CreateComponent implements OnInit {
@ViewChild('createForm') createForm;
@ViewChild('clone') template: TemplateRef<any>;
// Where to insert the cloned content
@ViewChild('container', {read:ViewContainerRef}) container: ViewContainerRef;
data: JobModel = new JobModel();
count: number = 0;
constructor() {
}
ngOnInit() {
this.data.interview = [];
this.cloneTemplate();
}
cloneTemplate(){
this.data.interview[this.count] = new InterviewLocationModel();
let view = this.template.createEmbeddedView({index: this.count});
this.container.insert(view);
this.count++;
}
removeTemplate(interviewDetail, currentTemplateIndex){
this.container.remove(this.template[currentTemplateIndex]);
var currentIndex = this.data.interview.indexOf(interviewDetail);
this.data.interview.splice(currentIndex, 1);
}
}