推送的数组在ngAfterViewinit上未定义
推送的数组在ngAfterViewInit上未定义是指在Angular的生命周期钩子函数ngAfterViewInit中访问或操作一个未定义的数组。
解决这个问题的方法有以下几种：
- 确保数组已经被正确地声明和初始化。在ngAfterViewInit之前，确保推送的数组已经被定义并赋予了初始值。例如，在组件的类中声明一个空数组，并在ngOnInit或其他适当的生命周期钩子函数中对其进行初始化。
- 检查数组的作用域。确保推送的数组在ngAfterViewInit中是可访问的。如果数组是在组件的局部作用域中定义的，确保它在ngAfterViewInit中仍然是可见的。如果需要，在组件的类中将数组定义为成员变量，以便在整个组件中都可以访问。
- 使用ngIf指令进行条件渲染。如果推送的数组是在ngAfterViewInit之后才被定义的，可以使用ngIf指令在模板中进行条件渲染。这样可以确保只有在数组被定义后才会执行相关的操作。
- 检查是否存在异步操作。如果推送的数组是通过异步操作获取的，例如从服务器请求数据，确保在数组被定义之前等待异步操作完成。可以使用rxjs的Observable和subscribe方法来处理异步操作。
总结起来，解决推送的数组在ngAfterViewInit上未定义的问题需要确保数组已经被正确地声明、初始化，并且在ngAfterViewInit中可访问。如果数组是通过异步操作获取的，需要确保在数组被定义之前等待异步操作完成。
相关·内容
我在Angular ngOnInit上的数组上推送了一些值，数据在ngAfterViewInit上变得不可用，它显示特定的值未定义 randomNUMber = [];
ngOnInit() {
this.apiServices.getLineChart(this.coinId).subscribe(resc => {
for (let i =0 ; i < 8 ; i++) {
this.randomNUMber.push(Number(resc.data[i].price));
}
浏览 32提问于2019-10-07得票数 1
回答已采纳
2回答
我有一个数组，它声明为public，初始化为空数组。
correctives = [];
现在，在构造函数方法中，我初始化了订阅方法。
constructor(private messageService: MessageService){
this.childTicketSubscribe = this.messageService.getChildTicketData().subscribe((data) => {
console.log(JSON.stringify(this.correctives)); //[]
// print empt
浏览 2提问于2020-07-09得票数 0
1回答
我希望在打开页面时自动打开“材料”菜单，但由于没有单击“触发器”，因此“触发器”未定义。
TypeError:无法读取未定义的属性(读取“openMenu”)
@ViewChild('menuTrigger') trigger;
ngOnInit() {
if (this.headerService.isCookieDown = "0") {
this.trigger.openMenu()
}
}
<button mat-button #menuTrigger="m
浏览 9提问于2022-09-10得票数 -1
回答已采纳
我得到了以下错误:错误: Uncaught (承诺)：TypeError:无法读取未定义的属性'nativeElement‘。
当我试图添加带有ngIf的div和google地图中时，就会发生这种情况：
HTML：
<div class="form-group">
<label>Location by map?</label>
<mat-select formControlName="ubication" [(ngMo
浏览 0提问于2019-09-03得票数 1
回答已采纳
1回答
尝试在tabs.ts中使用Ionic Tabs文档中的select()方法。但是，当我尝试运行它时，它似乎说"select是未定义的“，当我尝试console.log(选项卡)时，我发现我的console.log实际上是空的/未定义的。尝试搜索viewChild未定义的原因，但无法真正理解原因。
指向离子标签文档的链接：
tabs.html
<ion-tabs #tabs>
<ion-tab [root]="tab1Root" tabTitle="Request" tabIcon="alert"></io
浏览 1提问于2017-07-18得票数 9
回答已采纳
我正在使用ngx-popover，当尝试从另一个组件打开它时，它显示了以下错误，无法读取下面未定义的属性“显示”，如下代码所示。中的父组件home.html。
home.html
<button (click)="onShowPopOver()">Device</span>
<device-popover *ngIf="showPopover"></device-popover>
home.component.ts
onShowPopOver() {
this.showPopover=true;
}
我的dev
浏览 1提问于2017-04-25得票数 0
我有一个模板：
<ion-content no-bounce>
<ion-nav #pageView class="no-scroll"></ion-nav>
</ion-content>
<ion-grid #menu class="menu" (swipe)="swipeEvent($event)">
</ion-grid>
我想要的是访问DOM元素#菜单和#pageView，我正在尝试这样做：
@ViewChild(“菜单”)菜单: ElementRef；
浏览 3提问于2018-01-18得票数 0
回答已采纳
我有点困惑。我以为我基本上理解了角组件的生命周期，但后来我遇到了一个有趣的例子，即组件的@输入没有定义。
在本例中，有我的应用程序的两个实例。当注销挂起时，将显示给定的组件：LogoutWarning，然后用户可以刷新登录令牌并继续。效果很好。
当第一个应用程序更新登录令牌并隐藏显示LogoutWarning组件时，实例将出现。在第一个应用程序中，一切都很好。
第二个应用程序还显示了LogoutWarning组件，因为它检测到登录令牌将过期，并显示一个LogoutWarning模态，然后它会注意到登录令牌已被更新，并调用LogoutWarning.cancel()来隐藏该模式。在这种情况下，t
浏览 3提问于2017-09-29得票数 10
var strArr = []
strArr[0].push("someThing Text")
console.log(strArr)
错误:无法读取未定义的属性(读取“推送”)
var strArr = []
strArr[0] = "someThing Text"
console.log(strArr)
数组"someThing文本“
这两者有什么区别？为什么数组元素不能使用推送方法？
浏览 13提问于2021-12-20得票数 -3
1回答
似乎只有在第一次发出可观察对象时才会设置子组件。 容器组件(添加map运算符进行调试)： this.form$ = this.createOrderStore.pipe(select(getFormGroup)).pipe(
tap((val) => {
console.log('observable emitted');
console.log(val);
return val;
})
); 子组件： private _form: FormGroup;
@Input()
set form(val) {
console.log(
浏览 9提问于2019-02-02得票数 1
1回答
角质材料2分页器与垫-表初始化
、、、、
我试图使角质材料2分页组件与表组件(mat表指令)一起工作。
我按照mat表文档添加了一个分页器，试图使它们的示例与我现有的工作垫表一起工作。
在component.html中，我有一个工作席表和一个分页器：
<div class="example-container">
<mat-table [dataSource]="dataSource">
// columns and rows
</mat-table>
<mat-paginator #paginator
浏览 1提问于2018-04-25得票数 3
回答已采纳
4回答
在这里，我把所有的控制台和代码放在下面。我想把数组推到数组里，例如。在imagesArray中有3个数组，现在我推送有2个数组的结果数组，所以第一个数组在imagesArray中被正确地推送，但是最后一个数组显示未定义和未推送，并给出了错误，就像未定义的imageArray，那么如何推送呢？(我把控制台和代码放在下面)
推送对象控制台前imagesArray
结果我想要推动result
按下控制台后，如下所示
add-folder.component.ts
imagesArray : UploadedImages[] = [];
dialogRef.afterC
浏览 2提问于2018-11-30得票数 0
回答已采纳
1回答
我正在尝试使用*ngFor创建多个映射，但是在组件div中，在将它分配给mapbox的容器变量之前，必须做好准备。不幸的是，如果不使用setTimeout，则会引发未定义映射id的错误。
我的组件html看起来像-
<div class="css-map-custom" id="map{{mv_mapId}}"></div>
相应的打字本是-
this.map = new mapboxgl.Map({
container: `map${this.mv_mapId}`, .....
由于"div未找到“错误，我不得不将映射呈现函数放
浏览 0提问于2018-07-06得票数 1
回答已采纳
页面上的加载输入应该是重点 <mat-form-field>
<input matInput #element placeholder="username" >
<button type="button" (click)="focus()" class="btn btnStyles" >HighLight</button> @ViewChild('element') ref:ElementRef;
浏览 23提问于2021-08-29得票数 0
我使用query导航到组件之间的特定选项卡。接收组件(它需要检查查询参数)一直返回错误：
Cannot set property active of undefined
在一个组件中，我有以下html。
<button *ngIf="isLoggedInUser" style="position: absolute; right: 0" class="btn btn-link btn-sm"
[routerLink]="['/users/' + auth.currentUser.id + &#
浏览 0提问于2019-06-15得票数 1
回答已采纳
1回答
下面的代码将this.child克隆到ngAfterViewInit方法中的obj中：
import { Component, Input, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'child',
template: `<input [value]="value">`,
})
export class ChildComponent {
@Input() value: string;
}
@Component({
浏览 4提问于2022-02-15得票数 -1
回答已采纳
1回答
嗨，我在我的角度9项目中尝试使用小滑块。我在遵循指南。
我的组件看起来如下：
import { tns } from "../../../../../node_modules/tiny-slider/src/tiny-slider"
...
ngOnInit(): void {
tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true
});
}
HTML：
<div class="my-slider&#
浏览 2提问于2021-04-21得票数 1
1回答
我正在尝试动态地向我的应用程序添加组件。
我有一个名为formcontainer.的组件我想根据配置在这个组件中加载不同的表单。
所以我在google上搜索并尝试动态添加组件，但是我得到了控制台错误。无法读取未定义的属性createComponent。 this.includeTemplate未定义。根据代码错误是正确的，因为值没有赋值给变量。但我所指的例子也是一样的，这是可行的。
我想我漏掉了什么。
容器组件
import { Component, OnInit, Input, ElementRef, ComponentFactoryResolver, ViewChild, View
浏览 4提问于2017-10-23得票数 1
回答已采纳
2回答
我的mat-table运行良好，但是当在官方api文档之后添加mat-排序时，它会在ngAfterViewInit上失败，其中包含以下消息
LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit 不能设置未定义的aq 属性“排序”
已经有一个关于猫桌分类演示的帖子，并尝试了它们，但我仍然无法让它工作。
有人能帮我解决这个问题吗？该正式示例使用组件本身中的“静态”MatTableDataSourcedefined，不过，我是从后端查询的。
MatSortModule已经导入到app
浏览 2提问于2019-02-26得票数 2
回答已采纳
2回答
我需要将与角2结合使用。
import {Component, ElementRef, OnInit} from '@angular/core';
declare var $: any;
@Component({
templateUrl: 'app/views/daily-reports.html'
})
export class DailyReportsComponent implements OnInit {
constructor(private elRef: ElementRef) {}
ngOnInit(): void {
浏览 2提问于2016-07-08得票数 1
3回答
我的可重用组件中有一个ngModel组件。字段不是表单的一部分。我想通过它来做一些修改。我尝试过下面的代码，但它在OnInit中没有定义。你能告诉我怎么访问它吗？
下面的代码返回未定义的
@ViewChild('nameAccessor') ngModel:NgModel;
ngOnInit(): void {
console.log(this.ngModel);
}
模板
<input ngModel (blur)="nameBoxChanged(nameAccessor)" (keyup)="nameBoxChanged(nameAcc
浏览 6提问于2017-10-18得票数 4
回答已采纳
有人能帮助我如何从我的angular2组件中的外部js文件中调用函数吗？下面是我的代码片段，当我试图加载应用程序时，它抛出的应用程序是未定义的错误。
以下是我的组件代码：
import { Component, OnInit, AfterContentInit } from '@angular/core';
@Component({
selector: 'test',
templateUrl: './test.html'
})
export class TestComponent implements OnInit {
浏览 2提问于2017-06-13得票数 0
当将数组的内容推送到另一个数组时，我得到
“未定义的TypeError:无法读取未定义的”错误的属性'push‘。
var order = new Object(), stack = [];
for(var i=0;i<a.length;i++){
if(parseInt(a[i].daysleft) == 0){ order[0].push(a[i]); }
if(parseInt(a[i].daysleft) > 0){ order[1].push(a[i]); }
if(parseInt(a[i].daysleft) < 0){
浏览 6提问于2014-07-19得票数 83
回答已采纳
在尝试列搜索时，我得到了“错误:无法读取属性‘那么’的未定义”。你能建议我这个问题吗..。
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns().every(function () {
const that = this;
$("input", this.footer()).on("keyup change", function () {
if (that.search() !== thi
浏览 0提问于2021-02-18得票数 1
回答已采纳
角v5.0.1
我在一个组件上有这个模板
<div #content>some content</div>
<some-component [content]="content"></some-component>
我想通过#content将SomeComponent变量的引用传递给@Input()content，但是我不确定变量是什么类型。
从我在网上搜索的内容来看，似乎是ElementRef，所以我做了
@Input()
component: ElementRef;
ngOnInit() {
console
浏览 2提问于2017-11-14得票数 8
回答已采纳
2回答
对于编写角度单元测试来说，我并不是什么新鲜事，也不知道如何用@Input指令为组件编写单元测试。
这是我的
== file.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-bugs-table',
templateUrl: './bugs-table.component.html',
styleUrls: ['./bugs-table.component.scss']
浏览 2提问于2018-09-28得票数 3
我们用的是
TestBed.overrideComponent(CoolComponent, {
set: {
template: '<div id="fake-component">i am the fake component</div>',
selector: 'our-cool-component',
inputs: [ 'model' ]
}
})
覆盖组件。
组件有一个ViewChild，我们在ngOnInit方法中配置它
@Compone
浏览 1提问于2016-09-02得票数 16
1回答
export class ParentComponent implements OnInit {
constructor(private render : Renderer2) { }
@ViewChild('box', { static: false }) box: ElementRef;
ngOnInit(): void {
this.render.setStyle(this.box.nativeElement,'backgroundColor','red'); }
}
<div #box>
浏览 10提问于2020-06-04得票数 0
回答已采纳
我不知道如何将数据推送到"decData“中的" data”属性。
var decData = {
labels: [],
datasets: [
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: []
浏览 3提问于2014-02-05得票数 0
回答已采纳
如何获取组件中所有模板(TemplateRef)的集合？它在ViewChild上工作得很好，但是ViewChildren是未定义的……
我使用这个中的一个解决方案。包含完整示例的。
@Component({
selector: 'my-app',
template: `
<div>
<template #model>...</template>
<template #color>...</template>
浏览 0提问于2017-04-01得票数 6
回答已采纳
1回答
离子2中的几个问题
、、、
在html文件中
<canvas #canvas id="canvas"></canvas>
<button (click)="draw()" ion-button block icon-right>Donate <ion-icon name="heart"></ion-icon></button>
在ts文件中
import { Component , ViewChild , ElementRef } from '@angular/core';
import
浏览 4提问于2017-08-30得票数 0
回答已采纳
1回答
框架:角8
我可能遗漏了一些东西，我需要得到元素的width，并将子元素的width除以5。
我第一次尝试从@ViewChild获取值，但得到了错误。
ERROR TypeError:无法读取未定义的属性“nativeElement”。
code.ts
@ViewChild("qrywrapper", { static: false }) qrywrapper: ElementRef;
qrycontainerWidth;
constructor() {}
ngOnInit() {
/* Query Bar */
this.qrycontainerWidth
浏览 3提问于2019-12-22得票数 1
回答已采纳
2回答
我正在尝试使用一个可观察对象显示一个微调器，该对象使用模板中的异步管道解析为布尔值。可观察值是在服务中设置的。我不知道哪里出了问题。可观察值似乎解析为未定义的值。为什么这可能不起作用？ Here是为示例创建的stackblitz。
浏览 35提问于2020-01-25得票数 0
回答已采纳
1回答
这个问题是对前一个问题()的继承。我仍然在处理相同的文件，目的是编写用于角度测试的简单教程。新问题涉及到setTimeout函数。
在ngOnInit和ngAfterViewInit上，我都在实现setTimeout (将来我将编写的其他测试就是这样做的，所以这只是创建一个基本示例)。内部函数设置通过HTML文件传递给子组件的变量的值。然后检查此子组件的变量是否有特定的值。
我已经尝试过使用tick( value )和fixture.detectChanges()来尝试触发setTimeout函数的内容，但该值仍未定义(请参阅代码片段)。
random.test.component.ts
pu
浏览 0提问于2019-07-11得票数 0
回答已采纳
我使用ViewChild来访问模型中的组件(我使用了ngTemplate)，但是它总是被设置为“未定义”，因此我不能访问它的方法.
我称该函数为openModal，"paginatorComponent“未定义。我也试过超时..。
// modal.component.ts
export class SelezionaSensoreModalComponent implements OnInit {
@ViewChild('myModal') templateRef: TemplateRef<any>;
@ViewChild(PaginatorCo
浏览 4提问于2022-05-03得票数 1
嗨，我正在使用Angular2网站应用程序，在视图初始化之后，我需要触发一个函数，但是我有错误，我已经跟踪了官方的angular2站点
错误:异常:未定义(承诺)：ReferenceError: ngAfterViewInit未定义ReferenceError: ngAfterViewInit未定义
代码:
import { Component } from '@angular/core' ;
import { DropDown } from '../services/dropdown';
import {ExponentialStrengthPip
浏览 8提问于2017-02-16得票数 1
回答已采纳
我在Angular 6中使用Bootstrap 4模式，一旦模式关闭，我想将用户重定向到另一条路径。然而，当模式关闭时，我得到了一个作用域问题，告诉我我的注入路由器是未定义的。
我的代码：
import { Component, OnInit } from '@angular/core';
declare var $: any
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./mo
浏览 0提问于2018-09-17得票数 0
我在把一个值推到桌子上。但是，当我试图在我的console.log中打印出来时，我会得到未定义的，但我知道我正在推送一个不是未定义的值。
var attachmentIds = [];
for(var i = 0; i < files.length; i++){
uploadFileToServer(files[i]).then(function(data){
console.log(data[2]);
if(data[0]){
completed();
浏览 2提问于2014-04-03得票数 0
回答已采纳
3回答
我有一个与焦点相关的问题。我需要的是在组件的onInit函数的第一个字段上设置一个焦点状态。但是我不能正确地对准场地。
我试过了
export class EgrCrearRecetaComponent implements OnInit {
@ViewChild('paciente') ePaciente;
...
}
在onInit函数中
ngOnInit() {
this.buildForm();
// try to set
this.ePaciente.nativeElement.focus();
...
}
这是我忘了说的，
浏览 0提问于2017-08-28得票数 2
我正在与angular2-signaturepad开发一个angular项目。我试图访问模板中的一个组件，所以我创建了一个@ViewChild。但当我尝试使用它时，它是未定义的。 下面是相关的html代码片段： <signature-pad [options]="options" (onBeginEvent)="drawBegin()" (onEndEvent)="drawComplete()"></signature-pad> 下面是typescript文件中的代码片段： @ViewChild(SignaturePad
浏览 26提问于2020-08-13得票数 0
回答已采纳
情况
从app组件中，我需要在另一个组件中调用一个方法。
我读到@ViewChild是做这件事的方法。
但不适合我的情况。我得到了以下错误：
Cannot read property ... of undefined
代码
例如，这是HomePage组件中的一个简单测试方法。
testChild()
{
alert('child working');
}
在app.component中，我声明HomePage为子组件：
@ViewChild(HomePage) homePage: HomePage;
然后从构造函数调用该方法：
this.homePage.testChi
浏览 5提问于2016-11-28得票数 3
回答已采纳
当父组件初始化时，我想动态地创建子组件，但是当我试图在ngAgterViewInit()中创建它时，它会抛出ViewContainerRef未定义的错误。
component.ts
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {
}
ngAfterViewInit(){
const factory = this.resolver
浏览 0提问于2018-09-21得票数 2
回答已采纳
角CLI6
在我的部分，我有：
@ViewChild('necRiskAnalysisDialog')
private necRiskAnalysisDialog;
在某个时候我打了个电话给
this.necRiskAnalysisDialog.set(...
在我的html中，我
<div>
<div *ngIf="someCondition">
<nec-risk-analysis #necRiskAnalysisDialog></nec-risk-analysis>
</div>
<
浏览 0提问于2018-10-03得票数 1
回答已采纳
我只想在UI完全呈现之后执行一些操作。
因为子组件是以未定义的形式出现的
子组件来自库(来自作为依赖项添加的另一个应用程序的组件)。所以我不能修改/增强子组件。
my.html
<div>
<h4>Parent</h4>
<child-component #childComponent></child-component>
</div>
my.component.ts
@ViewChild('childComponent', {read: ChildComponent, static: false
浏览 9提问于2022-02-24得票数 1
1回答
? 您可以看到数据被正确地呈现，但是每页的项目是未定义的，并且搜索输入类型宽度缩小了，但是如果我重新加载页面，为什么呢？为什么当我访问此页面和刷新数据时会正确呈现这种连接行为 ? 打字文件的代码- .ts length;
pageSize = 25;
pageSizeOptions = [25, 50, 75, 100];
@ViewChild('TABLE') table: ElementRef;
@ViewChild(MatPaginator) paginator: MatPagin
浏览 35提问于2020-10-04得票数 1
因此，我得到了一个角组件，在输入文本之前的HTML简单地是：<svg #linechart id="chartSpace"></svg>
为了制作一个响应性好的网页，我决定设置视图的高度和宽度：#chartSpace { width: 100vw; height: 50vh; }。
然后，为了获得缩放图表轴线的高度/宽度，我在Stack溢出上遵循了几个示例，并尝试使用ViewChild获取元素，如下所示。但是，运行此操作会导致记录为未定义的高度和宽度。我遗漏了什么？
TS文件：
import {Component, OnInit, ElementRef,
浏览 1提问于2018-12-09得票数 0
回答已采纳
我正在尝试使用ViewChildren从我的模板中获取一个由层叠的画布元素组成的数组，这样以后我就可以像绘图程序中的图层一样对它们进行绘制。
drawing.component.html
<canvas #canvaslayer style="z-index: 0;"></canvas>
<canvas #canvaslayer style="z-index: 1;"></canvas>
<canvas #canvaslayer style="z-index: 2;"></canv
浏览 0提问于2018-11-29得票数 1
回答已采纳
我在角2中创建了一个指令，在这个指令中我必须访问Component。为此，我使用了ViewChild (此方法在普通组件中有效，但在指令上下文中不起作用。
这是我的指示：
import {Component, ViewChild} from "@angular/core";
import {NavController, NavParams} from "ionic-angular";
import {IONIC_DIRECTIVES} from "ionic-angular";
import {ComponentBase} from ".
浏览 5提问于2016-08-10得票数 0
回答已采纳
在视图中，我有这样的条件：
<h3 *ngIf="show">{{users.result}}</h3>
在TypeScript逻辑中，我有：
show=false; <----as a property
以及以下功能：
timeOut(seconds: number, value:boolean) {
value = true;
setTimeout(
function() {
value = false;
}.bind(this),
seconds
)
浏览 1提问于2019-02-23得票数 0
回答已采纳
1回答
我试图从这个ngFor中使用中的一个组件，但是我得到了一个错误(表达式在被检查后发生了变化)。以前的值：“未定义”。当前值：‘false’)。
在onAfterViewInit函数中抛出错误。是否有更好的方法来初始化变量？
export class ReadMoreComponent implements AfterViewInit {
/**
* the text that need to be put in the container
*/
@Input()
public text: string;
/**
* maximum height of the container i
浏览 2提问于2016-12-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
