@ViewChild возвращает неопределенное значение - Angular 2 - PullRequest
Новая
       11

@ViewChild возвращает неопределенное значение - Angular 2

0 голосов
/ 06 марта 2019

Я пытаюсь использовать @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 возвращается правильно, но myInputIn возвращает неопределенное значение. Как я могу решить это?

Ответы [ 3 ]

0 голосов
/ 06 марта 2019

Вы сможете получить доступ к запросам ViewChild только внутри ngAfterViewInit ().Он не доступен в ngOnInit (), поэтому вы получаете неопределенное значение.

0 голосов
/ 06 марта 2019

В коде есть некоторые ошибки, исправьте их и повторите попытку. 

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

должен быть закрывающий тег -> [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.." />
0 голосов
/ 06 марта 2019

Похоже, вы комментируете ввод или, по крайней мере, начали 

 <!--  <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.." />

"<! -" не должно быть там </p>

...