J'ai une boîte de dialogue composant qui affiche lorsque je clique sur un bouton "Modifier" en regard d'un élément dans un tableau. La boîte de dialogue composant ressemble à ça pour l'instant:
<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>
Cela ressemble et fonctionne très bien, et sert son but. Mais maintenant, j'ai plusieurs autres tables avec différents types de données, et bien que je puisse créer une boîte de dialogue séparée pour chaque table et ajouter les champs de formulaire manuellement pour chaque type, je voudrais avoir une solution plus souple.
Comment puis-je créer une boîte de dialogue où les champs de formulaire sont ajoutées sur la base de la référence de type de l'élément? E. g: Si j'ai un objet de type "Fruits" dans une table avec properites comme 'Nom', 'Color', 'Prix', et un objet de type "Voiture" avec des propriétés comme 'Nom', 'Fabriqué', 'Ch', puis-je utiliser la même boîte de dialogue composant et créer le formulaire dynamiquement?