Saya mencoba membuka model yang akan menampilkan informasi dari komponen lain. Saya menyuntikkan data ke komponen anak, tetapi saya mendapatkan kesalahan. Saya bertanya-tanya apakah itu karena array yang saya suntikkan terkadang nol.

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

Ini adalah komponen induk

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


}

Ini adalah templat induknya

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

Ini adalah komponen anak

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

  }

}

Saya belum memiliki template untuk anak, tetapi saya mendapatkan kesalahan hanya dengan mengklik tombol. Harap dicatat bahwa saya melihat array dari komponen induk, dan ketika itu nol, saya melihat []. tapi saya tidak bisa melewatinya dengan benar. Mungkinkah saya mendapatkan kesalahan karena saya mencoba mengirimkan array?

0
Heidi E 20 November 2020, 05:37

1 menjawab

Jawaban Terbaik

Sepertinya Anda tidak menyuntikkan matdialog di komponen induk Anda.

StarshipComponent.ts

constructor(private swapi: SwapiService, private route: ActivatedRoute, private dialog: MatDialog) {
  this.name = this.route.snapshot.paramMap.get('name');
}

Dari pada

constructor(private swapi: SwapiService, private route: ActivatedRoute) {
  this.name = this.route.snapshot.paramMap.get('name');
}

Ref: https://stackblitz.com/angular/ yjjeryedojbp?file=src%2Fapp%2Fdialog-overview-example.ts

1
Arunkumar Ramasamy 20 November 2020, 03:40