Ho un componente della finestra di dialogo che mostra quando clicco un pulsante Modifica accanto a un elemento in una tabella. Il componente della finestra di dialogo simile a questo per ora:
<h1 mat-dialog-title>{{item.ID}}</h1>
<div mat-dialog-content>
<p>Edit item</p>
<mat-form-field appearance="outline" style="justify-content: center;">
<mat-label>ID</mat-label>
<input matInput [(ngModel)]="item.ID">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input matInput [(ngModel)]="item.Name">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Date</mat-label>
<input matInput [(ngModel)]="item.Date">
</mat-form-field>
</div>
<div mat-dialog-actions style="justify-content: center;">
<button mat-button (click)="onNoClick()">Cancel</button>
<button mat-button [mat-dialog-close]="item.ID" cdkFocusInitial>Save</button>
</div>
Funziona bene, e serve il suo scopo. Ma ora ho diverse altre tabelle con diversi tipi di dati, e mentre posso creare una finestra di dialogo separata per ogni tabella e aggiungere i campi del modulo manualmente per ogni tipo, mi piacerebbe avere una soluzione più flessibile.
Come posso creare una finestra di dialogo in cui i campi del form vengono aggiunti sulla base l'elemento di riferimento tipo? E. g: Se ho un oggetto di tipo 'Frutta' in un tavolo con la proprietà come 'Nome', 'Color', 'Prezzo', e un oggetto di tipo 'Auto', con proprietà come 'Nome', 'Prodotti', 'Potenza', posso utilizzare la stessa finestra di dialogo del componente e creare la forma in modo dinamico?