Angular 4,用于添加和删除多个位置的模板

时间:2018-04-08 09:34:30

标签: angular typescript

我正在创建视图以添加多个位置或使用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); 

  }

}

0 个答案:

没有答案