我确定我一定遗漏了一些非常简单的东西，但我已经为此苦苦挣扎了一整天......我有一个带有一个文本输入的 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 ，这没有任何区别。