@ViewChild returns 未定义 - Angular 2

Question

我正在尝试使用@ViewChild 来获取我需要的DOM 元素。我有以下组件描述了我的问题：

import {Component, ViewChild, ElementRef, OnInit, Input} from "@angular/core";


@Component({
  selector: 'some-comp',
  template: `

  <input
    #myInputOut
    type="text"
    class="google-place-input"
    placeholder="Type to search..">

   <span class="row form-group">
     <required-input
       class="col-12 has-danger"
       [label]="'somel:'"
       [controlName]="'somel'"
       [form]="group"
      </required-input>
    </span>

 <div class="row form-group2 required">
    <label class=" col-3 control-label" for="street">label:</label>
    <input #myInputIn class="col-7" id="someid" placeholder="Type to search.." /></div>
`
})
export class someClass implements OnInit{

  @ViewChild('myInputOut') myInputOut: ElementRef;
  @ViewChild('myInputIn') myInputIn: ElementRef;


  private element: HTMLInputElement;
  private element2: HTMLInputElement;

    constructor(  private databaseService : DatabaseService,
               private router : Router){

  }


  ngOnInit(){
    this.element = this.myInputOut.nativeElement;
    this.element2 = this.myInputIn.nativeElement;
  }
}

出于某种原因 myInputOut returns 正确但 myInputIn returns 未定义。我该如何解决这个问题？

Answer 1

看起来您正在评论输入或至少开始

 <!--  <div class="row form-group2 required">
    <label class=" col-3 control-label" for="street">label:</label>
    <input #myInputIn class="col-7" id="someid" placeholder="Type to search.." />

“ [form]="group" >

<!--<div class="row form-group2 required">

删除<div class="row form-group2 required">前的“<!--”，并用</div>

正确关闭

最后声明输入类型type="text"

<input #myInputIn type="text" class="col-7" id="someid" placeholder="Type to search.." />

@ViewChild returns 未定义 - Angular 2

@ViewChild returns undefined - Angular 2

dom

viewchild

angular