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 中才能正常工作，我有尝试将其放入 admin-layout.module.ts 中，这似乎更糟，如果我同时放入两者，我当然会出错。

这里是 admin-layout.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"

:)