@ViewChild(ElementRef.nativeElement)返回未定义

时间:2018-06-30 19:54:09

标签: angular typescript

我有一个父组件,该组件通过*ngFor打印出子组件。

<app-item
  *ngFor="let item of items; let i = index"
  [item]="item" [index]="i" (edited)="updateItems($event)">
</app-item>

子组件具有以下模板

<input [(ngModel)]="item" #input type="text" class="form-control" (blur)="editEnd()">

以及以下课程

export class ItemComponent implements OnInit {
  @Output()
    edited = new EventEmitter<{index: number, value: string}>();

  @ViewChild('input', {read: ElementRef}) input: ElementRef;

  isEditing = false;

  @Input() item: string;
  @Input() index: number;

  constructor() { }

  ngOnInit() {
  }

  editStart(): void {
    this.isEditing = true;
    console.log(this.input);
  }

  editEnd(): void {
    this.isEditing = false;
    this.edited.emit(
      {
        index: this.index,
        value: this.item
      }
    );

    console.log('ended');
  }

  delete(): void {
    console.log('deleted');
  }

}

问题是console.log(this.input.nativeElement);返回未定义,而console.log(this.input);包含属性“ nativeElement”。我试图将ViewChild更改为ViewChildren,但是console.log(this.input.nativeElement.first());仍然返回未定义的内容。

0 个答案:

没有答案