Bonjour ,

Cette fois-ci j'ai vraiment pas d'idée sur comment résoudre mon problème..

Mon besoin : Afficher un dialog qui permet sur click d'un bouton d'edition de mettre à jour le contenu de la datatable.

Actuellement : Le code html du dialog est OK
Quelques fonctions de mises à jour sont OK
Sur click du bouton d'edition la dialog s'affiche mais sans la data.

Le problème : Je n'ai jamais fais ce type de manipulation avec deux classes dans un meme component.ts.
L'une des classes doit récupérer la data de l'autre classe.

Merci pour l'explication !

Le dialog.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h2 mat-dialog-title>Moficiation du CheckConfig <strong>{{action}}</strong></h2>
<mat-dialog-content class="mat-typography" *ngIf="action != 'Delete'">
  <form #userForm="ngForm">
 
 
    <mat-form-field>
      <mat-label>Status</mat-label>
      <select matNativeControl required name="status" [(ngModel)]="local_data.status">
        <option value="OK">OK</option>
        <option value="KO">KO</option>
        <option value="NotListed">NotListed</option>
      </select>
    </mat-form-field>
    <mat-form-field>
      <input type="text" matInput required id="details" name="details" [(ngModel)]="local_data.details"
        placeholder="Détails">
    </mat-form-field>
 
  </form>
</mat-dialog-content>
 
<div mat-dialog-actions align="end">
  <button mat-button (click)="doAction()" color="warn">{{action}}</button>
  <button mat-button (click)="closeDialog()" mat-flat-button>Cancel</button>
</div>


Le check-config.component.ts
Code angular : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
export class CheckConfigComponent implements OnInit {
...
 constructor(private dataService: RestApiService, private changeDetectorRefs: ChangeDetectorRef, private notification: NotificationsService, public dialog: MatDialog) {     
  }
openDialog(action: string, checkconfig: any) {
    checkconfig.action = action;
    const dialogRef = this.dialog.open(checkconfig, {
      data: checkconfig
  });
 
    dialogRef.afterClosed().subscribe(result => {
        if (result.event === 'Update') {
            this.updateRowData(result.data);
        }});
  }
 
  updateRowData(checkconfig: any) {
    this.dataSource.data = this.dataSource.data.filter((value, key) => {
        if (value.id === checkconfig.id) {
            value.status = checkconfig.status;
            value.details = checkconfig.details;            
        }
        return true;
    });
}
...
...
...
 
@Component({
  // tslint:disable-next-line: component-selector
  selector: 'dialog-content',
  templateUrl: 'dialog-content.html',
})
// tslint:disable-next-line: component-class-suffix
export class DialogContent {
  action: string;
  local_data: any;
 
  constructor(
      public dialogRef: MatDialogRef<any>,
      // @Optional() is used to prevent error if no data is passed
      @Optional() @Inject(MAT_DIALOG_DATA) public data: any) {
      // *console.log(data);
      this.local_data = XXXXX;                                                                  //Problème : Comment y mettre la data que j'ai récupéré dans la classe au dessus ?
      this.action = this.local_data.action;
  }
 
  doAction() {
      this.dialogRef.close({ event: this.action, data: this.local_data });
  }
 
  closeDialog() {
      this.dialogRef.close({ event: 'Cancel' });
  }
 
}
}