ngModel в MatDialog не обновляет модель при вводе значения в диалоговом окне

Я уверен, что мне не хватает чего-то ужасно простого, но я мучился с этим целый день ... У меня есть 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 {}

Тааак ... Если бы кто-нибудь мог указать мне, где я делаю ошибку, я был бы очень признателен! Дайте мне знать, если я пропустил важную информацию - я новичок в Angular :)

О, я также пробовал добавить changeDetectorRef в компонент диалога, но это не имело никакого значения.


person Ego Placebo    schedule 08.04.2021    source источник


Ответы (1)


Попробуйте изменить:

([ngModel])="data.note"

to:

[(ngModel)]="data.note"

:)

person Jojofoulk    schedule 08.04.2021
comment
LMAO спасибо! Я знал, что это должно быть что-то простое ... пришлось смотреть на ваш ответ в течение 30 секунд, прежде чем я смог увидеть разницу! Проклятые брекеты! - person Ego Placebo; 08.04.2021
comment
Хахаха, не беспокойтесь, такие ошибки случаются постоянно. Иногда вам просто нужна еще одна пара глаз - person Jojofoulk; 08.04.2021