角窗体在单击时添加输入字段

Question

我希望在单击时添加新的输入字段，但要在前一个输入字段上选择文本，以便对其进行编辑。

字段第一视图

字段第二视图

当我单击字段(添加工作站)时，我希望选择前面的字段with (未命名的工作站)和Add工作站，使其始终可见并在下面显示。我一直在试图找到一种方法来实现这一点，但至今没有运气。

html：

<div class="_form-item" *ngIf="item.type=='station'&& item.id" style="padding-top: 32px">
  <div class="_label">Work Stations</div>
  <div class="_ml-12 _pt-8 _flex-row" *ngFor="let work_station of item.children; let i = index;
                trackBy: customTrackBy">
    <input [id]="i" (ngModelChange)="updateWorkStation(i)"
           [(ngModel)]="item.children[i].name"
           type="text"/>
    <div class="_icon-button" (click)="removeWorkStation(i)"><i
      class="material-icons md-dark md-18">clear</i>
    </div>
  </div>
  <div class="_ml-12 _pt-8 _flex-row">
    <input (click)="createWorkStation()" placeholder="Add work station" [(ngModel)]="newWorkStation"
           type="text"/>
    <!--div class="_link-button">Add</div-->
  </div>
</div>

组件功能：

createWorkStation() {
    let item = new Location();
    item.type = 'work_station';
    item.name = 'Unnamed work station ';
    item.parent = this.item.group_id;
    this.service.create(item)
    .map((response: Response) => <Location>response.json())
    .takeWhile(() => this.alive)
    .subscribe(
        data => {
            this.onCreateChild.emit({id: data.id});
        },
        err => {
            console.log(err);
        }
    );
}

Answer 1

您可以在每个input字段中附加一个模板变量(#test)：

<input #test [id]="i" (ngModelChange)="updateWorkStation(i)"
       [(ngModel)]="item.children[i].name"
       type="text"/>

使用此模板变量，您可以使用ViewChildren及其可观察到的change跟踪是否向视图中添加了新的input字段：

@ViewChildren('test') el: QueryList<ElementRef>;

但是，订阅可观察到的change必须在ngAfterViewInit中完成

  ngAfterViewInit() {
      this.el.changes.subscribe( next => {
          setTimeout(() => this.elementFocus());
      });
  }

  elementFocus() {
      if( this.el != undefined && this.el.last != undefined ) {
          this.el.last.nativeElement.focus();
          this.el.last.nativeElement.select();
     }
  }

这是给你的工作实例