angular - Angular Material Dialog:如何在父组件中更改注入的数据时更新它们?
问题描述
将数据注入材料对话框效果很好,但是如果它们在父/打开器组件中发生更改(例如来自(WAMP)订阅),如何自动更新这些数据?
[更新]
我创建了一个最小版本来尝试行为:https
://stackblitz.com/edit/angular-njh44v?embed=1&file=src/app/app.component.ts
打开右下角的控制台侧并单击带有数字的灰色框。您会看到对话框获取当前编号,之后不再更新。
[/更新]
[更新 2]
基于 Jusmpty 的第二个想法,这个接缝一见钟情(即使对话框在数据到达后第一次显示/更新):
https ://stackblitz.com/edit/angular-thd34f?embed =1&file=src/app/app.component.ts
[/更新]
具体案例如下所示:
- 有一个区域组件订阅 WAMP 服务并获取包含部分的所有数据。这将使用 *ngFor绘制所有部分。
文件area.component.ts
- 每个部分都有自己的组件显示一些数据。如果订阅中的数据发生变化,则视图会正确并自动更新,对于每个/所有部分。
文件part.component.ts和part.component.html - 在每个部分上单击打开一个对话框,其中显示更多数据。
文件part-details-dialog.component.ts和part-details-dialog.component.html
在最后一个操作/步骤中,会出现当前数据正在显示(注入)但如果订阅数据中的某些内容发生更改则不再更新的问题。
area.component.ts
@Component({
selector: 'app-area',
template: '<app-part *ngFor="let part of plan" [partData]="part"></app-part>'
})
export class AreaComponent {
plan = [];
planasync$ = this.wampService
.topic('sendplan')
.subscribe(
res => {
let tm = new TableMap();
this.plan = tm.tableToMap(res.argskw).filter((m) => m.area === 1);
},
err => console.log("res err", err),
() => console.log("res complete"));
constructor(private wampService: WampService) { }
}
part.component.ts
import { PartDetailsDialogComponent } from './part-details-dialog/part-details-dialog.component';
@Component({
selector: 'app-part-details',
templateUrl: './part.component.html'
})
export class PartComponent {
@Input() partData: any;
constructor(public dialog: MatDialog) {}
openDetailsDialog(): void {
let dialogRef = this.dialog.open(PartDetailsDialogComponent, {
width: '650px',
height: '400px',
data: {
partData: this.partData
}
});
}
}
part.component.html
<mat-card (click)="openDetailsDialog()">
<mat-card-title>Nr: {{ partData.partNr }}</mat-card-title>
<mat-card-content>
<div>Current speed: {{ partData.speed }}</div>
</mat-card-content>
</mat-card>
部分细节-dialog.component.ts
@Component({
selector: 'app-part-details-dialog',
templateUrl: './part-details-dialog.component.html'
})
export class PartDetailsDialogComponent {
constructor(public dialogRef: MatDialogRef<PartDetailsDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
部分详细信息-dialog.component.html
<h1 mat-dialog-title>Part Details for Nr. {{ data.partData.partNr }}</h1>
<div mat-dialog-content>
<div>Current speed details: {{ data.partData.speed }}</div>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>
解决方案
您可以只更改data
组件实例,如下所示:
this.dialogRef.componentInstance.data = {numbers: value};
推荐阅读
- powershell - 在 Windows 2016 服务器中使用 Powershell 脚本从 Windows 任务计划程序启动应用程序的问题
- .net-core-3.0 - 模式匹配增强:切换模式
- excel - VBScript Do While 循环在嵌套时跳过部分代码
- python - Keras 模型.预测结果
- ejabberd - agsXMPP,创建 muc 房间“只允许占用者向会议发送消息”
- python - 我该如何处理这个 np.where 脚本?
- ios - Flutter:应用程序不是 x86_64。运行 lipo -info:, App is architecture: arm64
- python - 无法计算python中double for循环的迭代次数
- django - 无法更新模型 ManyToMany 关系 django。收到一条错误消息,指出尚未定义模型字段
- java - Spring RestTemplate throwing 403 Forbidden after hitting API