Viewchild为空
是指在前端开发中，使用Angular框架时，通过@ViewChild装饰器获取子组件的引用时，返回的结果为空。
@ViewChild是Angular中用于获取子组件或DOM元素的装饰器。它可以用来在父组件中访问子组件的属性、方法或DOM元素。然而，当我们使用@ViewChild装饰器获取子组件引用时，有时会遇到返回空值的情况。
这种情况可能是由于以下原因导致的：
- 组件还未初始化：当父组件尝试获取子组件引用时，如果子组件还未初始化完成，@ViewChild装饰器可能会返回空值。这通常发生在父组件的ngOnInit生命周期钩子函数中，因为子组件的初始化可能会在父组件之后发生。解决这个问题的方法是将获取子组件引用的逻辑放在ngAfterViewInit生命周期钩子函数中，确保子组件已经初始化完成。
- 子组件选择器错误：如果使用@ViewChild装饰器时指定的子组件选择器与实际子组件的选择器不匹配，也会导致返回空值。请确保选择器的正确性。
- 子组件未导入或未声明：如果子组件未正确导入或未在父组件的模块中声明，@ViewChild装饰器也会返回空值。请确保子组件已经正确导入并在模块中声明。
解决Viewchild为空的问题，可以按照以下步骤进行：
- 确保父组件中的ngAfterViewInit生命周期钩子函数中获取子组件引用的逻辑。
- 检查子组件选择器是否正确，并与实际子组件的选择器匹配。
- 确保子组件已经正确导入并在父组件的模块中声明。
腾讯云提供了一系列的云计算产品，可以帮助开发者构建和部署应用程序。其中与前端开发相关的产品包括：
- 腾讯云对象存储（COS）：提供了可靠、安全、低成本的对象存储服务，适用于存储和管理前端应用程序中的静态资源。链接地址：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：通过在全球部署节点，加速静态资源的传输，提高前端应用程序的访问速度和用户体验。链接地址：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：提供了可扩展的云服务器实例，适用于部署前端应用程序和后端服务。链接地址：https://cloud.tencent.com/product/cvm
以上是关于Viewchild为空的解释和解决方法，以及腾讯云相关产品的介绍。希望对您有帮助！
相关·内容
如果值等于零(0)，有没有简单的方法来设置输入值为空/空？我在这里遇到了这个AngularJS问题，，但是我找不到任何关于Angular 2+的东西。
它只需要在页面加载时完成。我意识到我可以在组件中使用setter，但是想知道是否有什么东西可以放在输入本身上。
这可以通过一个指令来完成吗？
浏览 2提问于2018-02-07得票数 1
在本例中，我使用的是反应式表单，而不是ngModel
我正在向输入文本字段中写入内插值
当我提交我的表单时，我得到了所有的字段值，除了插入的那个。插值为空
如何修复？？
<label class="form-control-sm"
id="identificationCode"
name="identificationCode">{{reference.value + "-" + publishDate.value}}
</label>
<input #txtId
浏览 26提问于2019-08-07得票数 0
4回答
当用户提交当前值时，我正在尽可能快地为值服务。在本例中，在提交当前值之后，我将重置表单并向用户提供新值。在提供新值之后，async调用form.reset执行就完成了，所以最后我的用户获得了空/空值。
是否有其他方法来实现这一目标，或者是否有机会使其成为sync？
代码：.ts
@ViewChild('f') form
ngOnInit() {
this.initialCall();
}
initialCall() {
this.name = 'Angular 5';
}
浏览 0提问于2018-06-12得票数 2
回答已采纳
我想知道为什么angular 4 ChartJS组件不能渲染。
我已经使用yarn安装了这个包，并且它存在并正确导入。我可以在chrome控制台中看到Chart对象，但canvas元素仍然为空。
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import Chart from 'chart.js';
@Component({
selector: 'app-root',
template: '<canvas #aChart>
浏览 7提问于2017-07-30得票数 6
回答已采纳
1回答
我引用了输入元素：
@ViewChild("inputSearch", {
static: false
})
模板是：
<input tabindex="0" type="text" (keydown)="keydownInputSearch($event)" #inputSearch autocomplete="off" autofocus />
<div class="searchWrapperBtn" (click)="reset()">
浏览 5提问于2020-02-21得票数 0
回答已采纳
1回答
我希望获得DOM元素并在不使用ElementRef的情况下初始化JSON。
代码：
import {Component, ViewChild} from 'angular2/core';
@Component({
selector: 'json-editor',
template: `
<div #container class="json-editor-container"></div>
`
})
export class JSONEditorComponent implemen
浏览 3提问于2016-03-03得票数 0
回答已采纳
1回答
Viewchild为空
、、、
(Angular 9)我需要使用ViewChield().This是我的html： <input type="text" pInputText [(ngModel)]="code" #inputStudent/> 在我的测试中，我这样做： @ViewChild('inputStudent', { read: ElementRef }) someInput: Input;
....
ngAfterViewChecked() {
if (this.someInput != null) {
console.l
浏览 25提问于2020-07-16得票数 0
1回答
在角12中，我正在项目中设计一个可重用的组件，但是在设置验证器时，我会得到以下错误
[]‘’类型的参数不能分配给类型为'ValidatorFn ValidatorFn ValidatorFn[] x_ null‘的参数。类型'(ValidatorFn收空，空，未定义)[]‘不能分配给键入'ValidatorFn[]’。键入'ValidatorFn‘不可分配'ValidatorFn \ null _null\’未定义‘。类型'undefined‘不能分配到键入'ValidatorFn’。
import { Component, El
浏览 4提问于2021-09-03得票数 0
回答已采纳
这是复选框所在的HTML组件
<mat-checkbox class="dashboard-content-custom-select-option" id="dashboard-all-checkbox" #allSelector [indeterminate]="someCheckboxesActive()" [checked]="allCheckboxesActive()" (click)="toggleAllSelection($event)">Alle </mat-checkbox&g
浏览 5提问于2022-07-21得票数 1
我有一个Angular组件，它的模板中有一个html元素。我希望能够在某个可观察对象发出任何值时创建元素。因此，我对元素进行了如下编码 <div #myDiv *ngIf="myObs | async"> this is my div </div> 其中myObs是可观测的。 同时，我希望以编程方式管理这个元素，因此我像这样使用ViewChild @ViewChild('myDiv') myDiv: ElementRef;
....
ngAfterViewInit() {
const myNativeElement = this.m
浏览 12提问于2019-01-30得票数 2
回答已采纳
3回答
我的表使用芯片输入"type“下的值。但是当它没有价值的时候。里面还有一块空白的芯片。有人知道我怎么能解决这个问题吗？
[![html
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header="type">Type</th>
<td mat-cell *matCellDef="let truck" class="pr-24"&g
浏览 0提问于2019-04-26得票数 3
回答已采纳
我有一个组件，在那里我将画一个帆布图。当我第一次初始化组件时，一切正常，但是如果我离开这个组件并再次返回它，那么document.getElementById('myChart')；是空的，不会绘制我的图表
ngAfterViewInit() {
Chart.register(...registerables);
this.Chart();
}
private Chart() {
const ctx: any = document.getElementById('myChart');
const myChart = new
浏览 3提问于2022-03-24得票数 0
回答已采纳
角@ViewChild错误:预期的2个参数，但得到1.ts (2554)。
我是一个新的学习者，现在我被困在一个点，我不明白为什么我要把这个错误带到我的导出类@ViewChild('namInput')我也做了一个更新，但仍然是一样的。有人能帮我吗？
代码示例：
从“@角/核心”导入{ Component，OnInit，ElementRef，ViewChild}；
导出类ShoppingEditComponent实现OnInit {
@ViewChild('nameInput') nameInputRef: ElementRef；
@ViewChild(
浏览 1提问于2019-08-23得票数 0
@ViewChild装饰器有没有办法在ngOnInit中获得子组件的实例，就像从angular 6的旧@ViewChild中一样？ 我试过这样的方法： @Component({
....
})
export class AppComponent implements OnInit {
@ViewChild(HelloComponent, {static: true})
@ViewChild(HelloComponent, {static: false})
hello: HelloComponent;
ngOnInit() {
console.log('
浏览 43提问于2020-10-16得票数 1
我使用ViewChild的方法如下：
@ViewChild("InternalMedia") localStream;
@ViewChild("emoji") mEmoji;
在angular-7.x之前一直工作得很好
当我将它升级到angular-8.x时，它开始给出以下错误
.../call_emoji/component.ts(41,4): error TS2554: Expected 2 arguments, but got 1.
我选中了，当我将其更改为
@ViewChild("InternalMedia",{static:false}
浏览 1提问于2019-06-06得票数 50
回答已采纳
3回答
我将一个svg加载为一个对象：
<object data="assets/img/states.svg" type="image/svg+xml" id="map"></object>
这个svg包含一个大的png映射和几个rect和文本元素。
<rect
y="224.72084"
x="644.87109"
height="231.68137"
width="101.08391"
id="RE
浏览 0提问于2019-01-04得票数 2
回答已采纳
2回答
测试角模板驱动表单
、、、、
我使用的是角5，表单的.controls属性始终是空的。不知道为什么在测试过程中没有通过读取模板文件来创建表单控件。
模板文件
<form
#myForm="ngForm"
novalidate>
<input
#myCtrl
required
type="input"
name="myCtrl"
id="myCtrl"
[(ngModel)]="value">
</form>
组件文件
@ViewChild(&
浏览 0提问于2018-06-15得票数 1
回答已采纳
我犯了这个错误
TypeError:无法获得未定义或空引用的属性“nativeElement”TypeError:无法获取未定义或空引用的属性“nativeElement”
这是我的示例代码app.component.html
<mat-form-field *ngFor="let i of [1,2,3,4,5]" class="example-full-width form-controlNew">
<input matInput autocomplete="off" placeholder="17 Su
浏览 0提问于2018-12-12得票数 2
回答已采纳
1回答
我正在测试这个HTML表单：
<form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
<input #inputValid type="text" class="form-control" name="nombre" id="field_nombre"
[(ngModel)]="paciente.nombre
浏览 0提问于2018-05-17得票数 1
3回答
我已经附上了下面的stackblitz
我试图实现的是，在单击label元素时，它应该集中在input.Hence，即输入: focus 类获取activated.What，我相信它可以通过javascript/jquery实现，但我更喜欢用角度的方式来实现这一点。
简而言之，这是我想要做的两件事，
单击label时，将焦点放在输入元素上。
当焦点被更改为另一个输入元素时，如果前面的元素不是空的(如果输入了某个值)，.The标签应该保持其在顶部的位置。
<input class="input" type="text">
<l
浏览 1提问于2019-06-01得票数 1
回答已采纳
让我们看看：
import {
Component, OnInit, ViewEncapsulation, Input, ElementRef, ViewChild, AfterViewInit
} from '@angular/core';
@Component({
selector: 'app-sidebar',
template: `
<aside #sidebar>
Sidebar
</aside>`,
})
export class AppSidebar implements OnInit, After
浏览 6提问于2017-01-31得票数 1
回答已采纳
2回答
下面的屏幕上有4个按钮，用于完成在组件之间传递数据的教程()。
我在@ViewChild部分遇到了麻烦。在四个按钮下面有一个路由器链接，在每个按钮上填充，单击相关组件。
当我单击@ViewChild按钮时，组件会显示，但是消息没有填充，它是空的。
当我第二次单击@ViewChild按钮时，该消息将按预期填充。
我相信这不是@ViewChild的预期结果。因此，我需要知道它为什么要这样做，以及如何纠正它，以便在第一次单击时消息是可见的。
教程说：“我们需要实现AfterViewInit生命周期挂钩来接收来自子程序的数据”，我已经这样做了。
下面是我的父母和孩子的代码。
浏览 2提问于2019-08-14得票数 0
回答已采纳
我需要添加谷歌自动完成建议的多个输入数组。
下面是我的示例代码：
<mat-form-field *ngFor="let i of [1,2,3,4,5]" class="example-full-width form-controlNew">
<input matInput autocomplete="off" placeholder="17 Summit Avenue" formControlName="formattedAddress" #search>
</mat-form
浏览 0提问于2018-12-17得票数 1
问题
当在ngOnInt上指定纬度和经度值时，事件地图、城市或区域显示为空？
我在7号角工作。
在ngOnInit上指定经纬度值时，事件地图、城市或地区显示为空
根据经纬度，城市必须展示的是纽约，但它展示的是空的。
如何解决问题？
以下是我所尝试的：
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.htm
浏览 4提问于2019-12-28得票数 0
回答已采纳
我已经升级到了角8.2.3，并将所有ViewChild调用转换为包含静态参数。现在，如果组件被包装在*ngIf中，我在访问组件时遇到了问题。
在此之前，这是可行的，我能够调用组件的方法：
html：
<div *ngIf="someBooleanResult">
...
<MyComponent #mycomponent1></MyComponent>
...
</div>
ts：
...
@ViewChild('mycomponent1') mycomponent1: MyComponent;
.
浏览 1提问于2019-08-28得票数 1
回答已采纳
2回答
我的项目运行角度8与打字记录。
我试图通过id获取html音频元素，并将其存储在变量中。然后，我希望从元素中获取持续时间，并将其存储在另一个变量中。
从一个工作示例中可以看到，在Javascript中，这是如下所示：
<audio id="music" preload="true">
<source src="./assets/img/hollywood.mp3">
JS
var music = document.getElementById('music');
var duration = mus
浏览 3提问于2020-04-29得票数 2
回答已采纳
在组件中的元素上切换类时遇到问题。从检查器中，我可以看到类成功地切换。但是，当单击#navbarToggle时，#navbarMenu中的所有内容都会被删除，并成为一个空列表。我可以在检查器中验证这一点，因为所有列表项都会消失。
我有一个导航栏组件，其中包含一个html页面，其中包含：
<nav>
<span #navbarToggle>Toggle</span>
<ul class="hidden" #navbarMenu>
<li><a href="#">
浏览 0提问于2019-01-06得票数 0
哪里可以找到关于引用变量的数据类型的信息？
<input #my-int .../>
<form #my-form />
在上例中，my-int指的是input，my-form指的是ngForm。我想知道在my-int、my-form等中有哪些属性和方法可供我使用。
浏览 3提问于2017-06-28得票数 1
回答已采纳
我正在尝试将一个值从父组件绑定到子组件，以使其可重用。
parent-component.ts
profile:any = {name:"", mobile:""}
Parent-component.html
<app-profile-name label="Name" [(name)]="profile.name"></app-profile-name>
儿童component.html
<div class="form-group">
<label for=&
浏览 4提问于2017-12-11得票数 0
回答已采纳
我的工作角度9，并希望访问一个输入字段后，点击一个按钮。现在它给了我一个未知数。我尝试过@ViewChild和@viewChildern，因为我使用的是ngIf。
Template.html文件
<div class="search-input" #searchDiv *ngIf="serachActive">
<input
#searched
autofocus
type="text"
class="serach-term"
placeholder
浏览 2提问于2020-12-08得票数 0
回答已采纳
我在我的应用程序中使用了Angular材质，并且我有两个mat-table对单个组件进行排序，但我的排序只对第一个表起作用
以下是ts代码
@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;
@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAft
浏览 1提问于2017-12-07得票数 4
回答已采纳
我使用ViewChild作为角格式提交。这是我的密码
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
expo
浏览 4提问于2021-03-26得票数 1
回答已采纳
1回答
我有一个带有日期字段的表单。最初，日期字段为空。当用户选择一个日期，然后单击clear按钮时，输入的数据将保留在那里。 我尝试了date=null和未定义，但不起作用 ts private clearValues(row: RecordDto) {
row.Date= null
row.contactName = null
} html <ng-container matColumnDef="Date" >
<div class="date-picker-container" >
<input clas
浏览 28提问于2019-06-12得票数 0
2回答
项目只显示在表上，当我单击该表时。
当第一次加载页面时，表是空的。我也不知道原因。
我从Rest-API云块存储中检索数据，然后填充空的Array。
以下是代码：
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
在这里，我导出接口PeriodicEleme
浏览 1提问于2020-09-03得票数 1
回答已采纳
我刚开始打字，如果这个问题很蠢，请原谅我。
关于下列代码：
import { Component, ViewChild } from '@angular/core';
//....
export class MyApp {
@ViewChild(Nav) nav: Nav;
//....
我知道Nav是返回类型，但是"nav: Nav“是什么意思？为什么返回类型需要"nav“作为变量？我试图查看官方文档，但没有找到任何线索(也许我找错了树)，这相当于：
import { Component, ViewChild } from '@angular/c
浏览 1提问于2017-12-15得票数 1
回答已采纳
我在我的项目中有很多视图子行。如何减少行数。有什么办法吗？ 请帮助我们找到解决方案。 app.component.ts： @ViewChild('pRef') pRef: ElementRef;
@ViewChild('Ref') Ref: ElementRef;
@ViewChild('pR') pR: ElementRef;
@ViewChild('ef') ef: ElementRef;
@ViewChild('main') main: ElementRef;
@ViewChild('power&#
浏览 27提问于2020-01-31得票数 0
10回答
用Ionic 2设定输入的焦点
、、、、
解决:
import { Component, ViewChild} from '@angular/core';
import { Keyboard } from 'ionic-native';
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
@ViewChild('input') myInput ;
constructor() {}
ionViewDidLoad() {
setTi
浏览 8提问于2016-09-21得票数 47
app.component.ts
import { Component, ViewChild ,AfterViewInit, ElementRef} from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html
浏览 2提问于2020-04-05得票数 0
我不知道为什么，但在我的情况下，我每次都会犯这样的错误：
ERROR TypeError: Cannot read property 'nativeElement' of undefined
我知道的(角8)，我必须在我的viewChild中指定是动态的。这是我的代码：
// my var
@ViewChild('currentMusic', { static: false }) audioRef: ElementRef;
// my listener
this.audioRef.nativeElement.addEventListener(
浏览 1提问于2020-02-12得票数 0
1回答
export class ComponentDetailsComponent implements OnInit {
@ViewChild('treeGridReference') treeGrid: jqxTreeGridComponent;
....more code....
this.treeGrid.clearSelection();// how do I mock this?
}
如果它是一个构造函数依赖项，我可以只用空的clearSelection方法为jqxTreeGridComponent创建一个存根，类似于：
class jqxTreeGri
浏览 0提问于2019-06-28得票数 0
2回答
如下所示，我有一个名为Treatment-as-tiff的组件，它的html文件中应该有一个按钮。当在site-map-component.the中发生特定操作时，该按钮应该是可见的--当我运行代码并将该操作设置为不显示该按钮时
请让我知道我在这里错过了什么
TreatmentAsTIFF html
<button *ngIf="iTreatmentAsTIFFVisibilityPasser.visibilityState"
title="Get Treatment As TIFF"
class="btn btn-sm bt
浏览 3提问于2021-09-28得票数 0
我有一个带有panelChange事件的ngbAccordion，它工作得很好。我想知道的是，如果我可以以编程方式调用该方法，ngOnInit中是否有一种方法？
<ngb-accordion #regularAccordion="ngbAccordion" *ngFor="let item of cartItems; index as i" activeIds={{activeIds}} (panelChange)="toggleAccordion($event, item)">
(panelChange)我想调用的方法：
toggl
浏览 0提问于2018-07-03得票数 0
我能够投影内容，但无法获得相同的引用。
我尝试使用#SelectorName，也尝试在ContentChild()和ContentChildren()中使用组件名。不知何故，尽管调用了ngAfterViewInit钩子，我还是无法获得引用。
更新的插画: viewchild，viewchild，contentchild，contentChildren :
浏览 0提问于2019-04-11得票数 0
回答已采纳
在下面的附图中，正如您可以看到的那样，在MatTableDataSouce对象中未定义_paginator键-值对。正因为如此，分页器无法工作。
浏览 0提问于2021-05-19得票数 0
我对这个问题不熟悉，面对这个问题。
我想检查变量elementRef的值，如果它在数据显示之前为空，因为我想显示图表。这是我的密码：
component.ts
@ViewChild('normalDeviasiDaily', {read: ElementRef}) normalDeviasiDaily: ElementRef;
component.html
<div *ngIf="normalDeviasiDaily">
<div #normalDeviasiDaily id="normalDeviasiDaily"
浏览 0提问于2019-03-14得票数 3
回答已采纳
3回答
我们正在应用程序中使用模态()。这种模式看上去如下：
<ng-template #modal let-modal>
<app-audio #audio></app-audio>
</ng-template>
这是逻辑：
@ViewChild('modal')
modal: ElementRef;
@ViewChild('audio')
audio: AudioComponent;
该模式以下列方式开启：
this.modalService.open(this.modal，{ size：'lg‘}
浏览 0提问于2018-11-08得票数 10
回答已采纳
在parent component Table component uses指令中查询子组件的指令时遇到问题。在我的报表汇总组件中使用了表格组件。在reportSummary组件中，我试图使用@ViewChild查找scrollbaleView指令的实例。我能够使用@ ViewChild (DataTable) table :DataTable找到表组件；类似地，我应该能够找到@ ViewChild (ScrollableView) scrollview : ScrollableView；但是它没有ViewChild文档说明这个您可以使用ViewChild从视图DOM中获取与选择器匹配的第一个
浏览 0提问于2017-12-28得票数 2
我正在重构一个视频聊天应用程序，我正在构建的角度12，我遇到了一个可能是一个简单的问题，我没有多少运气找到答案。
当我通过ElementRef将视频和音频输出发送到显示组件时，我一直在为视频服务中的变量使用静态名称，类似于…
video.service.ts
localParticipant: elementRef
remoteParticipant1: elementRef
remoteParticipant2: elementRef
…然后将它们链接到AfterViewInit生命周期挂钩中的显示组件。
all-remote-participants.component.ts
@Vie
浏览 3提问于2022-01-09得票数 1
回答已采纳
1回答
我已经将我的角项目从角版本8升级到了角版本9。它已经成功地升级了，但是当我在本地主机上运行这个项目时，或者当我试图构建我的项目时，它给了我以下错误。
ERROR in @ViewChild options must be an object literal
下面是我正在使用的一些文件中的@ViewChild语法。
@ViewChild('subjectbox',null) private elementRefsub: ElementRef;
我不知道我在这里做错了什么。
有人能帮忙吗？
提前谢谢！
浏览 10提问于2021-12-20得票数 3
回答已采纳
2回答
表达式在检查角后发生变化
、、、
我有上传文档的输入，我正在检查它是否是空的，以显示警报。
这是我的密码：
<div class="form-group">
<input type="file" name="file" accept="application/pdf, application/msword, application/vnd.ms-powerpoint"
(change)="onUpload($event)">
<input type="text" #docume
浏览 4提问于2020-05-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
