将数据从角度组件发送到对话框时出错

Question

在我的Angular代码中，我需要将一些数据从组件发送到对话框组件。我有初级编程技能，所以请耐心等待。

数据以json文件的形式显示为：

[
{"data": [40, 59, 80, 81, 56, 55, 40], "label": "Score", "a":1, "score": 5, "improvement": "+1"}
]

以下是我的做法

import { DialogFBComponent } from '../dialog-fb/dialog-fb.component';
import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import histGData2 from '../../assets/data/histGraphDialog.json';
export interface graphInt {
data: number;
label: string;
a: number;
}
export class StartWorkoutComponent implements OnInit{
public  dialogRef:any;
constructor(public dialog: MatDialog){}
ngOnInit()
{
this.dialogRef = this.dialog.open(DialogFBComponent, histGData2 );
}
}

以及在对话框组件中

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-dialog-fb',
templateUrl: './dialog-fb.component.html',
styleUrls: ['./dialog-fb.component.css']
})
export class DialogFBComponent
{
graphData: graphInt[];
constructor(@Inject(MAT_DIALOG_DATA) public histGData2:any){}
public lineChartOptions = 
{
scaleShowVerticalLines: true,
responsive: true,
fill: false
};
public lineChartLabels = ['1', '2', '3', '4', '5', '6', '7'];
public lineChartColors = [
{ // grey
backgroundColor: 'rgba(148,159,177,0)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];
public lineChartType = 'line';
public lineChartLegend = true;  public lineChartData = this.histGData2;
score=this.histGData2[0].score;
imp = this.histGData2[0].improvement;
}

我收到以下错误：

ERROR TypeError: Cannot read property '0' of null
at new DialogFBComponent (dialog-fb.component.ts:43)
at createClass (core.js:20716)
at createDirectiveInstance (core.js:20595)
at createViewNodes (core.js:21821)
at createRootView (core.js:21735)
at callWithDebugContext (core.js:22767)
at Object.debugCreateRootView [as createRootView] (core.js:22253)
at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:20074)
at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:9717)
at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:20185)

Answer 1

您可以使用dialogRef的实例来传递数据，然后您就不需要在构造函数中发送数据了。

this.dialogRef = this.dialog.open(DialogFBComponent, {
height: 'auto',
disableClose: true,
autoFocus: false,
});
let instance = this.dialogRef.componentInstance;
instance.histGData2 = histGData2 

并更新您的对话框组件如下：

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-dialog-fb',
templateUrl: './dialog-fb.component.html',
styleUrls: ['./dialog-fb.component.css']
})
export class DialogFBComponent
{
graphData: graphInt[];
histGData2:any;

public lineChartOptions = 
{
scaleShowVerticalLines: true,
responsive: true,
fill: false
};
public lineChartLabels = ['1', '2', '3', '4', '5', '6', '7'];
public lineChartColors = [
{ // grey
backgroundColor: 'rgba(148,159,177,0)',
borderColor: 'rgba(148,159,177,1)',
pointBackgroundColor: 'rgba(148,159,177,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];
public lineChartType = 'line';
public lineChartLegend = true;  
public lineChartData:any;
score:any;
imp:any;
constructor(){
if(this.histGData2 && this.histGData2.length){
this.lineChartData = this.histGData2;
this.score=this.histGData2[0].score;
this.imp = this.histGData2[0].improvement;}
}
}

Answer 2

设置默认值：

score = 0;
imp = '';
if(this.histGData2.length > 0 ){ 
score=this.histGData2[0].score;
imp = this.histGData2[0].improvement;
}

出现此错误是因为您正在访问不存在的第0个元素。null变量。