Question

使用Angular 2和Angular材质，并且mat-dialog中的表单存在问题。单击我的Mat-Dialog上的Save或Close后，它没有关闭。我需要再次在对话框中填写表格以将其关闭。我不知道为什么会这样。我认为Course-dialog.component.ts可能有问题。任何帮助。

Plunker处的完整代码

course-dialog.component.ts

import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
    import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
    import {FormBuilder, Validators, FormGroup} from "@angular/forms";

    @Component({
        selector: 'course-dialog',
        templateUrl: './course-dialog.component.html',
        styleUrls: ['./course-dialog.component.css']
    })
    export class CourseDialogComponent implements OnInit {

        form: FormGroup;
        description:string;

        constructor(
            private fb: FormBuilder,
            private dialogRef: MatDialogRef<CourseDialogComponent>,
            @Inject(MAT_DIALOG_DATA) {description,longDescription,
                category}) {

            this.description = description;


            this.form = fb.group({
                description: [description, Validators.required],

                longDescription: [longDescription,Validators.required]
            });

        }

        ngOnInit() {

        }


        save() {
            this.dialogRef.close(this.form.value);



        }

        close() {
            this.dialogRef.close();
        }





    }

Answer 1

   *Try like this*

    import {Component, Inject} from '@angular/core';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

    export interface DialogData {
      animal: string;
      name: string;
    }

    /**
     * @title Dialog Overview
     */
    @Component({
      selector: 'dialog-overview-example',
      templateUrl: 'dialog-overview-example.html',
      styleUrls: ['dialog-overview-example.css'],
    })
    export class DialogOverviewExample {

      animal: string;
      name: string;

      constructor(public dialog: MatDialog) {}

      openDialog(): void {
        const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
          width: '250px',
          data: {name: this.name, animal: this.animal}
        });

        dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
          this.animal = result;
        });
      }

    }

    @Component({
      selector: 'dialog-overview-example-dialog',
      templateUrl: 'dialog-overview-example-dialog.html',
    })
    export class DialogOverviewExampleDialog {

      constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

      onNoClick(): void {
        this.dialogRef.close();
      }

    }

Angular2和Angular材质垫对话框不起作用

1 个答案: