在matdialog内部使用表格

Question

目标：
在matdialog内部使用表单

问题：
我收到错误消息，但不知道如何解决。

信息：
*源代码的基础是此链接https://stackblitz.com/edit/angular-gfxu5k
* {https://material.angular.io/components/dialog/overview
*我是新来的

谢谢！

------------------
n1.component html

<p>
  n1 works!
</p>


<button (click)="openDialog()">test n1</button>

------------------
n1component ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from '../../components/my-dialog/my-dialog.component';

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

  constructor(
    public _dialog: MatDialog) 
  { 


  }

  ngOnInit() {
  }


  openDialog() {
    this._dialog.open(MyDialogComponent, { disableClose: true, data: { title: "N1", body: "N1" } });
  }  

}


-----------

my-dialog.component html


 <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">

<h3 matDialogTitle>{{ _title }}</h3>
<mat-dialog-content>
  <div>{{ _body }}</div>

  <h1>Hero Form</h1>
  <form (ngSubmit)="onSubmit()" #heroForm="ngForm">

    {{diagnostic}}
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name"
            required
            [(ngModel)]="model.name" name="name">
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text"  class="form-control" id="alterEgo"
            [(ngModel)]="model.alterEgo" name="alterEgo">
    </div>

    <div class="form-group">
      <label for="power">Hero Power</label>
      <select class="form-control"  id="power"
              required
              [(ngModel)]="model.power" name="power">
        <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
    </div>

    <button type="submit" class="btn btn-success">Submit</button>

  </form>

</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="primary" matDialogClose>OK</button>
</mat-dialog-actions>


----------------

my-dialog.component ts

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
import { Hero } from '../hero';

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

    private _title: string;
  private _body: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
    this._title = this.data.title;
    this._body = this.data.body;
  }

  powers = ['Really Smart', 'Super Flexible',
  'Super Hot', 'Weather Changer'];

model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

submitted = false;

onSubmit() {
  console.log("testtest"); 
  this.submitted = true; 
}

// TODO: Remove this when we're done
get diagnostic() { 
  return JSON.stringify(this.model); }
}