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