typescript - Angular mat-dialog odefinierat värde efter Closed()

Jag har arbetat i ett projekt med Angular 5 och Angular Material, jag försöker skicka ett värde till dialogrutan och få värdet tillbaka när dialogrutan stängs, men av någon anledning får jag undefined när dialogrutan stängs.

Dialog

import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ReaderService } from '../../../../../services/reader/reader.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
  selector: 'fuse-comment-dialog',
  templateUrl: './comment-dialog.component.html',
  styleUrls: ['./comment-dialog.component.scss']
})
export class CommentDialogComponent implements OnInit {

  public commentsForm: FormGroup;
  constructor(
    private fb: FormBuilder,
    private readerService: ReaderService,
    public dialogRef: MatDialogRef<CommentDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  ngOnInit() {
    this.commentsForm = this.fb.group({
      commentText: ['', [
        Validators.required
      ]],
      commentType: 'PrivateComment',
      commentGroup: 'Therabytes'
    });
  }

  public sendComent(): void {
    this.data['text'] = this.commentsForm.value.commentText;
    this.data['commentVisibility'] = this.commentsForm.value.commentType;
    this.readerService.newComment(this.data)
      .then((commentId) => {
        this.data['id'] = commentId;
        this.dialogRef.close();
      });
  }

  public closeDialog(): void {
    this.commentsForm.value.commentText = '';
    this.dialogRef.close();
  }

}

Kommentar komponent

public commentDialog(): void {
    let newComment = {
      documentId: this.document.id
    };
    let commentDialogRef = this.dialog.open(CommentDialogComponent, {
      width: '300px',
      data: newComment
    });
    commentDialogRef.afterClosed().subscribe(comment => {
      console.log(comment);
      this.comments.push(comment);
    });
  }

Svar #1

Det här problemet fick mig att bli förvånad ett tag.

Förutsatt att du redan har provat det accepterade svaret och fortfarande har problem, vänligen säkerställ att du injicerar MatDialogRef, istället för DialogRef.

Svar #2

För att få data från ditt modal till din afterClosed() Observable, måste du skicka ett argument till din dialogRef.close()-metod på följande sätt:

this.dialogRef.close(this.data);

Relaterade artiklar