Angular Subscribe返回undefined，Material Dialog传值Push报错

Let's break down what's going wrong here and fix it step by step:

1. The root cause of Cannot read property 'push' of undefined #

This error happens because your choosenEmployees array in the parent component hasn't been initialized. You've likely only declared its type but not assigned an empty array to it.

Fix this by initializing the array when you declare it:

// In your parent component class
choosenEmployees: Employee[] = []; // Critical: Initialize as empty array

2. Why you're getting undefined in the subscription #

Look at your current subscription code:

dialogRef.afterClosed().subscribe(result => {
  console.log(this.choosenEmployee);
  this.choosenEmployees.push(this.choosenEmployee);
});

You're referencing this.choosenEmployee instead of using the result parameter, which is the actual Employee object passed from the dialog when it closes. If this.choosenEmployee was never assigned a value elsewhere, it'll be undefined.

Update the subscription to use the returned result, and add a check to handle cases where the user closes the dialog without selecting an employee:

dialogRef.afterClosed().subscribe(result => {
  if (result) { // Only add if an employee was actually selected
    console.log('Selected employee:', result);
    this.choosenEmployees.push(result);
  }
});

3. Verify your dialog component setup #

Your getChoosenEmployee method looks correct, but make sure you've properly injected MatDialogRef into the dialog component's constructor:

import { MatDialogRef } from '@angular/material/dialog';
import { Employee } from '../path-to-your-employee-interface';

constructor(public dialogRef: MatDialogRef<YourDialogComponent>) { }

getChoosenEmployee(employee: Employee) {
  this.dialogRef.close(employee);
}

Full corrected code examples #

Dialog Component #

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { Employee } from '../path-to-your-employee-interface';

@Component({
  selector: 'app-employee-selection-dialog',
  templateUrl: './employee-selection-dialog.component.html'
})
export class EmployeeSelectionDialogComponent {
  // Assuming you pass employees to the dialog via @Input()
  @Input() employees: Employee[] = [];

  constructor(public dialogRef: MatDialogRef<EmployeeSelectionDialogComponent>) { }

  getChoosenEmployee(employee: Employee) {
    this.dialogRef.close(employee);
  }
}

Dialog Template #

<div *ngFor="let element of employees" class="employee-item">
  <button mat-icon-button (click)="getChoosenEmployee(element)">
    <mat-icon>check_circle</mat-icon>
  </button>
  <span>{{element.firstName}} {{element.lastName}} (ID: {{element.employeeId}})</span>
</div>

Parent Component #

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { EmployeeSelectionDialogComponent } from './employee-selection-dialog/employee-selection-dialog.component';
import { Employee } from './path-to-your-employee-interface';

@Component({
  selector: 'app-add-workday-form',
  templateUrl: './add-workday-form.component.html'
})
export class AddWorkdayFormComponent {
  choosenEmployees: Employee[] = []; // Initialized empty array

  constructor(private dialog: MatDialog) { }

  openEmployeePicker() {
    const dialogRef = this.dialog.open(EmployeeSelectionDialogComponent, {
      width: '450px',
      data: { 
        // Pass any data your dialog needs, e.g., the list of employees
        employees: [/* Your employee list here */]
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.choosenEmployees.push(result);
        console.log('Updated selected employees:', this.choosenEmployees);
      }
    });
  }
}

内容的提问来源于stack exchange，提问作者NoobXDDD