当在对话框中输入值时，MatDialog 中的 ngModel 不更新模型

Question

我确定我一定遗漏了一些非常简单的东西，但我已经为此折腾了一整天...... 我有一个带有一个文本输入的 MatDialog。关闭对话框后，需要将该值发送到父组件。 matDialog 从父组件接收 数据并显示在文本输入中。但是，当我在输入中键入新值时，模型不会更新，因此永远不会返回数据。

MatDialog组件代码如下。

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

@Component({
  selector: 'app-itemnote-dialog',
  template: 
  `<h4 mat-dialog-title>Add short note for:<br> {{data.description}}</h4>

  <mat-dialog-content>
      <form #inp>
          <mat-form-field>
              <input  matInput ([ngModel])="data.note" [value]="data.note">
          </mat-form-field>
      </form>
  </mat-dialog-content>
  
  <mat-dialog-actions>
      <button class="mat-raised-button primary" (click)="close()">Close</button>
      <button mat-raised-button color="primary" class="mat-raised-button" (click)="save()">Save</button>
  </mat-dialog-actions>`,
  styleUrls: ['./itemnote-dialog.component.css']
})
export class ItemNoteDialogComponent  {
  constructor(public dialogRef: MatDialogRef<ItemNoteDialogComponent>,@Inject(MAT_DIALOG_DATA) public data:any) { 
    console.log(this.data); //logs correct data
  }

  save(){
    console.log(this.data); //logs the same data as in constructor even if changed in dialog text field
    this.dialogRef.close(this.data);
  }
  close(){
    this.dialogRef.close()
  }
}

我也曾尝试在保存按钮上使用 [matDialogClose]="data.note" 和 [matDialogClose]="data" 而不是保存功能，结果相同（没有）。我试过将数据作为私有数据注入并将其分配给对话框组件中的变量；

@Inject(MAT_DIALOG_DATA) data

this.data = data

但是无论我尝试过什么，data.note 的值都不会改变。

调用对话框的函数是：

public ItemNoteDialog(produce: Produce){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {description: produce.description, note: produce.note};

    this.dialog.open(ItemNoteDialogComponent, dialogConfig).afterClosed()
    .subscribe(response => {
      console.log("response: " + JSON.stringify(response));
    });
  }

有一件事我不确定（虽然我都试过了）是哪个 app.module 导入 MatDialogModule 和 ItemNoteDialogComponent 因为我从一个有子模块的模板开始 - 这就是我与

一起工作

所以现在我有 app.module:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';

import { AppComponent } from './app.component';
import { MatSortModule } from '@angular/material/sort';
import { MatDialogModule } from "@angular/material/dialog";

import { AgmCoreModule } from '@agm/core';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { OrderSummaryDialogComponent } from './shared/order-summary-dialog/order-summary-dialog.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { ConfirmDialogComponent } from './shared/confirm-dialog/confirm-dialog.component';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';

import { ItemNoteDialogComponent } from '../app/current-order/itemnote-dialog/itemnote-dialog.component';
import { MatInputModule } from '@angular/material/input';


@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    MatDialogModule,
    ReactiveFormsModule,
    HttpClientModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    MatSortModule,
    MatButtonModule,
    MatSelectModule,
    MatInputModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    OrderSummaryDialogComponent,
    ConfirmDialogComponent,
    ItemNoteDialogComponent
  ],
  exports:[MatSortModule, MatDialogModule],
  bootstrap: [AppComponent],
  entryComponents: [OrderSummaryDialogComponent]
})
export class AppModule { }

请注意，我还有其他仅显示数据的对话框 - 这些都工作正常。

还有另一个 module.ts - admin-layout。module.ts 声明调用对话框的组件，但我发现我的对话框只有在它们位于app.module，我试过将它放在管理布局中。module.ts，这看起来更糟，当然，如果我同时放入这两个，我会出错。

这是管理布局的当前状态。module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AdminLayoutRoutes } from './admin-layout.routing';
import { DashboardComponent } from '../../dashboard/dashboard.component';
import { UserProfileComponent } from '../../user-profile/user-profile.component';
import { TableListComponent } from '../../item-list/table-list.component';
import { TypographyComponent } from '../../typography/typography.component';
import { IconsComponent } from '../../icons/icons.component';
// import { MapsComponent } from '../../maps/maps.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
import { CurrentOrderComponent } from '../../current-order/current-order.component';
import { UpgradeComponent } from '../../upgrade/upgrade.component';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatRippleModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatPaginatorModule } from '@angular/material/paginator';
import { PastOrdersComponent } from '../../past-orders/past-orders.component';
import { LoginComponent } from '../../login/login.component';
import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import { CallbackPipe } from '../../pipes/callback/callback.pipe';
import { AccountComponent } from '../../account/account.component';
import { NewsComponent } from '../../news/news.component';
//import { ItemNoteDialogComponent } from '../../current-order/itemnote-dialog/itemnote-dialog.component';



@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatRippleModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatTooltipModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatAutocompleteModule,
    MatPaginatorModule,
    MatButtonModule,
    MatSelectModule,
    MatDialogModule
  ],
  declarations: [
    DashboardComponent,
    UserProfileComponent,
    TableListComponent,
    TypographyComponent,
    IconsComponent,
    NotificationsComponent,
    UpgradeComponent,
    CurrentOrderComponent,
    PastOrdersComponent,
    LoginComponent,
    CallbackPipe,
    AccountComponent,
    NewsComponent,
    // ItemNoteDialogComponent
  ],
  providers: []
})

export class AdminLayoutModule {}

Sooo...如果有人能指出我哪里出错了，我将不胜感激！如果我错过了任何重要信息，请告诉我 - 我是 Angular 的新手:)

哦，我也试过在对话框组件中添加 changeDetectorRef，但没有任何区别。

Answer 1

尝试更改：

([ngModel])="data.note"

至：

[(ngModel)]="data.note"

:)

当在对话框中输入值时，MatDialog 中的 ngModel 不更新模型

ngModel in MatDialog not updating model when value entered in dialog

typescript

angular2-ngmodel

angular

mat-dialog