[英]Angular 7 @ViewChild error Cannot read properties of undefined (reading 'next')
I have two components that I want them to interact with eachother.我有两个组件,我希望它们相互交互。 First is a modal that has a button in it that upon being clicked I want to go to the next step of my app.
首先是一个模式,其中有一个按钮,单击该按钮后我想 go 到我的应用程序的下一步。 The second component is an angular material stepper.
第二个组件是 angular 材料步进器。 How can I make my app go to the next step upon clicking the button in the pop up modal?
单击弹出模式中的按钮后,如何使我的应用程序 go 进入下一步?
I have been trying to do this using @ViewChild but am receiving this error in browser console when I click the button in my modal:我一直在尝试使用 @ViewChild 来执行此操作,但是当我在我的模式中单击按钮时,我在浏览器控制台中收到此错误:
ERROR TypeError: Cannot read properties of undefined (reading 'next')
at MyModalComponent.push../src/app/modals/my-modal/my-modal.component.ts.MyModalComponent.onLanguageSet
my-modal.component.ts:我的模态.component.ts:
import {Component, OnInit, Inject, ViewChild} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-my-modal',
templateUrl: './my-modal.component.html',
styleUrls: ['./my-modal.component.scss']
})
export class MyModalComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<MyModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
onLanguageSet() {
this.dialogRef.close();
}
ngOnInit() {
}
}
my-modal.component.html:我的模态.component.html:
<div mat-dialog-actions fxLayoutAlign="end">
<button mat-button mat-raised-button color="primary" (click)="onLanguageSet()">Begin configuration</button>
</div>
custom-stepper.component.ts:自定义 stepper.component.ts:
import { ChangeDetectorRef, Component, Input, QueryList } from '@angular/core';
import { CdkStep, CdkStepper } from '@angular/cdk/stepper';
@Component({
selector: 'app-custom-stepper',
templateUrl: './custom-stepper.component.html',
styleUrls: ['./custom-stepper.component.scss'],
providers: [{provide: CdkStepper, useExisting: CustomStepperComponent}],
})
export class CustomStepperComponent extends CdkStepper {
onClick(index: number): void {
this.selectedIndex = index;
}
}
custom-stepper.component.html:自定义步进器.component.html:
<footer>
<mat-toolbar>
<h2>Step {{selectedIndex + 1}}/{{_steps.length}}</h2>
<span class="fill-space"></span>
<button [ngClass]="selectedIndex > 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)>_steps.length" cdkStepperNext>Begin configuration</button>
<button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="secondary" class="naslednji-korak" [disabled]="selectedIndex == 0" cdkStepperPrevious>Previous step</button>
<button [ngClass]="selectedIndex == 0 ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)==_steps.length" cdkStepperNext>Next step</button>
<button [ngClass]="(selectedIndex + 1)<_steps.length ? 'noBtn': ''" mat-raised-button color="primary" class="naslednji-korak" [disabled]="(selectedIndex + 1)<_steps.length" (click)="reset()">Submit order</button>
</mat-toolbar>
</footer>
I am opening and closing the modal in configurator.component.ts with this code:我正在使用以下代码打开和关闭configurator.component.ts中的模态:
import { CustomStepperComponent } from '../custom-stepper/custom-stepper.component';
@ViewChild('stepper') stepper: CustomStepperComponent;
openDialog() {
const dialogRef = this.dialog.open( MyModalComponent, {
disableClose: true,
});
dialogRef.afterClosed().subscribe(result => {
this.stepper.next();
console.log('Zapri modal');
});
}
It seems like you're missing a template variable (in your case #stepper
) in your my-modal.component.html .您似乎在my-modal.component.html中缺少一个模板变量(在您的例子中
#stepper
)。
And since you're using the next()
method of that element, I assume the element will have to be of material stepper type, Otherwise, you'd see next is not a function
error!并且由于您正在使用该元素的
next()
方法,我假设该元素必须是材料步进器类型,否则,您会看到next is not a function
错误!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.