Блог

Я пытаюсь открыть модель, которая будет отображать информацию из другого компонента. Я вводю данные в дочерний компонент, но получаю сообщение об ошибке. Мне было интересно, связано ли это с тем, что вводимый массив иногда равен null.

 ERROR TypeError: Cannot read property 'open' of undefined
    at StarshipComponent.openPilots (main.js:97)
    at StarshipComponent_mat_card_0_Template_button_click_12_listener
 

Это родительский компонент

 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);
  // }


}
 

это родительский шаблон

 <!--<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>

 

это дочерний компонент

 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);

  }

}
 

У меня еще нет шаблона для дочернего элемента, но я получаю сообщение об ошибке, просто нажав на кнопку.
Пожалуйста, обратите внимание, что я вижу массив из родительского компонента, и когда он равен null, я вижу [] . но я не могу передать его правильно.
Могу ли я получать ошибку, потому что пытаюсь передать массив?

Кажется, вы не вводите 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/app/dialog-overview-example.ts