Question

我正在使用离子2。

我需要获取HTML元素值。

实际上，我使用了viewchild。

这是我的html模板代码

<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let last = last">
       {{last ? callFunction() : ''}} 

   <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">    
     <p class="chat-date"  id="abc" #abc>{{chat.date | amDateFormat:'LL'}}</p>                 
              {{checkdate()}}                         
   </div>

chat.date值是firebase值。我访问这个元素。但我没有得到元素的价值。

这是我的组件

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

    export class ChatPage   {
      @ViewChild(Content) content: Content;
      @ViewChild('abc')abc: ElementRef;
       constructor(){}

      ngAfterViewInit(){

       console.log("afterinit");
       console.log(this.abc.nativeElement.value);

      }
    }

我引用了此链接How can I select an element in a component template?

我试过很多方法。

但我收到此错误

Cannot read property 'nativeElement' of undefined.

Answer 1

我认为你要在完全渲染之前从html中获取值。如果您尝试在按钮单击中打印该值，它将起作用。

取决于你的代码我已经修改了一点。试试下面的内容，它对我有用。

  ngAfterViewInit() {
    console.log("afterinit");
    setTimeout(() => {
      console.log(this.abc.nativeElement.innerText);
    }, 1000);
  }

注意：如果不能正常工作，请延长超时时间，然后重试。

Answer 2

如果执行以下操作，则可以将ElementRef与@ViewChild结合使用

HTML标记：

<input type="text" class="form-control" #someNameInput>
<button
  class="btn btn-primary"
  (click)="clickMe()">Click Me</button>

在组件代码中：

@ViewChild('someNameInput',{static: true}) someNameInput: ElementRef;

对于较旧的版本是

@ViewChild('someNameInput') someNameInput: ElementRef;

constructor（）方法之前

这是在函数中使用它的方式

clickMe(){
console.log(this.someNameInput.nativeElement.value);

}

如果获得一些未定义的值，通常意味着这是JavaScript问题，并且您没有初始化任何东西。尝试先将ViewChild从方程式中取出，并确保代码先运行即可。然后将ViewChild引入混合。有点像先用邮递员测试您的API，然后再做Angular代码。确保后端先工作，然后确定它是Angular代码。 Angular具有不同的页面生命周期，因此某些值仅在onAfterViewInit事件中可用，而在其他事件中不可用。因此，您必须尝试查看周期。尚未尝试过，但我怀疑如果尝试在ngOnInit方法中获取ViewChild的值，则会得到错误或空白值。

Answer 3

不要指定变量abc的类型。它应该如下所示：

 @ViewChild('abc') abc;

Answer 4

最好使用的生命周期挂钩是AfterContentInit，允许脚本查找所有html内容（例如#map_canvas div）。

import { AfterContentInit, ViewChild } from '@angular/core';

此外，ViewChild进行了一些更新，它现在带有第二个参数：

@ViewChild('map_canvas', {static: false}) map_canvas: ElementRef;

现在，您可以使用该钩子来初始化地图了：

ngAfterContentInit() {
    this.loadMap();
}

Answer 5

改为使用类来显示/隐藏隐藏的元素。

<div [class.show]="boolean">...</div>

@viewChild not working - cannot read property nativeElement of undefined

Answer 6

我认为您应该将代码从ngAfterViewInit移到ngOnInit，以避免出现此类问题而不依赖于超时：

ngOnInit(){
  console.log("afterinit");
  console.log(this.abc.nativeElement.value);   
}

Answer 7

将子组件的选择器声明为“父”组件html模板。否则，组件对象abc将不会在运行时初始化，以在parent.ts文件中调用其函数或公共属性。

子组件abc：

@Component({
    selector: 'child-abc',
    templateUrl: './abc.component.html',
    styleUrls: ['./abc.component.css'],
})

在父组件的html模板上声明子选择器：

< child-abc > < /child-abc >

Answer 8

对于那些想知道的人，请注意，如果您尝试在使用静态标志的同时在动态渲染的对象上使用ViewChild，则在较新的Angular（8+）中使用ViewChild时，可能会遇到此错误。

示例： @ViewChild（'someSection'，{static：false}）someSection：ElementRef;

引入了{static：true}选项以支持动态创建嵌入式视图。当您动态创建视图并希望访问TemplateRef时，您将无法在ngAfterViewInit中执行此操作，因为这将导致ExpressionHasChangedAfterChecked错误。将static标志设置为true将在ngOnInit中创建视图。

在此感谢Poul Krujit指出以下几点：How should I use the new static option for @ViewChild in Angular 8?

Answer 9

我遇到了这个问题，以在ionic angular 9项目中显示条形图。添加超时功能后，我的问题已解决

Sub change_label()

Dim i as long, Label as long, LR As long, Cel As Range, rng As Range, WS As Worksheet
Set WS = ThisWorkbook.Worksheets("Scope")

Label = WorksheetFunction.Match("Label", WS.Rows(1), 0)
LR = WS.Cells(WS.Rows.Count, Label).End(xlUp).Row
Set rng = WS.Range(Cells(2, Label), Cells(LR, Label))

For Each Cel In rng
Cel.Value = ChLabel(Cel.Value)
Next Cel

End Sub

    Function ChLabel(CellRef As String) As String
    If CellRef Like "Printer*" Then ChLabel = "PRINTER"
    If CellRef Like "Ink*" Then ChLabel = "INK"
    If CellRef Like "Ribbon*" Then ChLabel = "RIBBON"
    If CellRef Like "A4Paper*" Then ChLabel = "A4" 
    End Function

无法读取属性＆＃39; native-element＆＃39;未定义的

9 个答案: