尝试将数据注入 mat-dialog 时出错
getting error when trying to inject data into mat-dialog
我正在尝试打开一个将显示来自另一个组件的信息的模型。我正在将数据注入 child 组件,但出现错误。我想知道是不是因为我注入的数组有时是空的。
ERROR TypeError: Cannot read property 'open' of undefined
at StarshipComponent.openPilots (main.js:97)
at StarshipComponent_mat_card_0_Template_button_click_12_listener
这是parent组件
import { Component, OnInit, Input } from '@angular/core';
import {SwapiService} from "../../models/swapi.service";
import {Pilot, Starship} from "../../models/starship";
import {ActivatedRoute} from "@angular/router";
import {MatDialog, MatDialogConfig} from "@angular/material/dialog";
import {PilotsComponent} from "../pilots/pilots.component";
// import {Location} from "@angular/common";
@Component({
selector: 'app-starship',
templateUrl: './starship.component.html',
styleUrls: ['./starship.component.css']
})
export class StarshipComponent implements OnInit {
// public starship: Starship;
public name: string;
public pilots: Pilot[];
public selectedStarship: Starship
private dialog: MatDialog;
private openPilotVariable = {display: 'none'};
showButton = {display: 'inline-block'};
constructor(private swapi: SwapiService,
private route: ActivatedRoute) {
this.name = this.route.snapshot.paramMap.get('name');
}
ngOnInit(){
// this.loadStarship();
this.swapi.apiData.subscribe(data => {
console.log('subscribed data', data);
this.selectedStarship = data.find(starship => starship.name == this.name);
// console.log(this.selectedStarship);
console.log(this.selectedStarship.pilots);
})
}
openPilots(): void {
this.openPilotVariable.display = 'block';
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = false;
dialogConfig.autoFocus = true;
dialogConfig.width = '600px';
dialogConfig.data = this.selectedStarship.pilots;
// dialogConfig.data = {
// starship: this.selectedStarship,
// };
// console.log(this.selectedStarship.pilots);
this.dialog.open(PilotsComponent, dialogConfig);
}
// backClicked() {
// this.location.back();
// // console.log(this.location);
// }
}
这是 parent 模板
<!--<button mat-stroked-button color="primary" [ngStyle]="{'margin':'1rem 2rem'}" (click)="backClicked()">Back</button>-->
<mat-card class="card" *ngIf="selectedStarship">
<mat-card-title>StarWar Details</mat-card-title>
<mat-card-subtitle>Name of Starship: {{selectedStarship?.name}}</mat-card-subtitle>
<mat-card-subtitle>Model: {{selectedStarship?.model}}</mat-card-subtitle>
<mat-card-subtitle>Manufacturer: {{selectedStarship.manufacturer}}</mat-card-subtitle>
<mat-card-subtitle>Cost In Credits: {{selectedStarship.cost_in_credits}}</mat-card-subtitle>
<mat-card-actions>
<button mat-raised-button type="submit" color="warn" (click)="openPilots()" [ngStyle]="showButton">More info on Pilots</button>
</mat-card-actions>
</mat-card>
这是 child 组件
import {Component, Inject, OnInit} from '@angular/core';
import {Pilot, Starship} from "../../models/starship";
import {SwapiService} from "../../models/swapi.service";
import {ActivatedRoute} from "@angular/router";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
@Component({
selector: 'app-pilots',
templateUrl: './pilots.component.html',
styleUrls: ['./pilots.component.css']
})
export class PilotsComponent implements OnInit {
// public starship: Starship[];
public pilots: Starship;
public name: string;
constructor(public dialogRef: MatDialogRef<Starship>,
@Inject(MAT_DIALOG_DATA) data,
private swapi: SwapiService,
) {
console.log(data);
// console.log(this.pilots);
}
ngOnInit(): void {
}
closeDialog(): void {
setTimeout(() => {
this.dialogRef.close();
}, 2000);
}
}
我还没有 child 的模板,但单击按钮时出现错误。
请注意,我从 parent 组件中看到数组,当它为空时,我看到 []。但我无法正确传递它。
我可能会收到错误消息,因为我正在尝试传递一个数组吗?
您似乎没有在父组件中注入 matdialog
。
StarshipComponent.ts
constructor(private swapi: SwapiService, private route: ActivatedRoute, private dialog: MatDialog) {
this.name = this.route.snapshot.paramMap.get('name');
}
而不是
constructor(private swapi: SwapiService, private route: ActivatedRoute) {
this.name = this.route.snapshot.paramMap.get('name');
}
参考:https://stackblitz.com/angular/yjjeryedojbp?file=src%2Fapp%2Fdialog-overview-example.ts
我正在尝试打开一个将显示来自另一个组件的信息的模型。我正在将数据注入 child 组件,但出现错误。我想知道是不是因为我注入的数组有时是空的。
ERROR TypeError: Cannot read property 'open' of undefined
at StarshipComponent.openPilots (main.js:97)
at StarshipComponent_mat_card_0_Template_button_click_12_listener
这是parent组件
import { Component, OnInit, Input } from '@angular/core';
import {SwapiService} from "../../models/swapi.service";
import {Pilot, Starship} from "../../models/starship";
import {ActivatedRoute} from "@angular/router";
import {MatDialog, MatDialogConfig} from "@angular/material/dialog";
import {PilotsComponent} from "../pilots/pilots.component";
// import {Location} from "@angular/common";
@Component({
selector: 'app-starship',
templateUrl: './starship.component.html',
styleUrls: ['./starship.component.css']
})
export class StarshipComponent implements OnInit {
// public starship: Starship;
public name: string;
public pilots: Pilot[];
public selectedStarship: Starship
private dialog: MatDialog;
private openPilotVariable = {display: 'none'};
showButton = {display: 'inline-block'};
constructor(private swapi: SwapiService,
private route: ActivatedRoute) {
this.name = this.route.snapshot.paramMap.get('name');
}
ngOnInit(){
// this.loadStarship();
this.swapi.apiData.subscribe(data => {
console.log('subscribed data', data);
this.selectedStarship = data.find(starship => starship.name == this.name);
// console.log(this.selectedStarship);
console.log(this.selectedStarship.pilots);
})
}
openPilots(): void {
this.openPilotVariable.display = 'block';
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = false;
dialogConfig.autoFocus = true;
dialogConfig.width = '600px';
dialogConfig.data = this.selectedStarship.pilots;
// dialogConfig.data = {
// starship: this.selectedStarship,
// };
// console.log(this.selectedStarship.pilots);
this.dialog.open(PilotsComponent, dialogConfig);
}
// backClicked() {
// this.location.back();
// // console.log(this.location);
// }
}
这是 parent 模板
<!--<button mat-stroked-button color="primary" [ngStyle]="{'margin':'1rem 2rem'}" (click)="backClicked()">Back</button>-->
<mat-card class="card" *ngIf="selectedStarship">
<mat-card-title>StarWar Details</mat-card-title>
<mat-card-subtitle>Name of Starship: {{selectedStarship?.name}}</mat-card-subtitle>
<mat-card-subtitle>Model: {{selectedStarship?.model}}</mat-card-subtitle>
<mat-card-subtitle>Manufacturer: {{selectedStarship.manufacturer}}</mat-card-subtitle>
<mat-card-subtitle>Cost In Credits: {{selectedStarship.cost_in_credits}}</mat-card-subtitle>
<mat-card-actions>
<button mat-raised-button type="submit" color="warn" (click)="openPilots()" [ngStyle]="showButton">More info on Pilots</button>
</mat-card-actions>
</mat-card>
这是 child 组件
import {Component, Inject, OnInit} from '@angular/core';
import {Pilot, Starship} from "../../models/starship";
import {SwapiService} from "../../models/swapi.service";
import {ActivatedRoute} from "@angular/router";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
@Component({
selector: 'app-pilots',
templateUrl: './pilots.component.html',
styleUrls: ['./pilots.component.css']
})
export class PilotsComponent implements OnInit {
// public starship: Starship[];
public pilots: Starship;
public name: string;
constructor(public dialogRef: MatDialogRef<Starship>,
@Inject(MAT_DIALOG_DATA) data,
private swapi: SwapiService,
) {
console.log(data);
// console.log(this.pilots);
}
ngOnInit(): void {
}
closeDialog(): void {
setTimeout(() => {
this.dialogRef.close();
}, 2000);
}
}
我还没有 child 的模板,但单击按钮时出现错误。 请注意,我从 parent 组件中看到数组,当它为空时,我看到 []。但我无法正确传递它。 我可能会收到错误消息,因为我正在尝试传递一个数组吗?
您似乎没有在父组件中注入 matdialog
。
StarshipComponent.ts
constructor(private swapi: SwapiService, private route: ActivatedRoute, private dialog: MatDialog) {
this.name = this.route.snapshot.paramMap.get('name');
}
而不是
constructor(private swapi: SwapiService, private route: ActivatedRoute) {
this.name = this.route.snapshot.paramMap.get('name');
}
参考:https://stackblitz.com/angular/yjjeryedojbp?file=src%2Fapp%2Fdialog-overview-example.ts