基于类型属性的角材料形式答案

【问题标题】：Angular material form based on type properties基于类型属性的角材料形式
【发布时间】：2022-01-02 06:06:24
【问题描述】：

我有一个对话框组件，当我单击表格中某个项目旁边的“编辑”按钮时会显示该组件。对话框组件现在看起来像这样：

    <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>

这看起来和工作正常，并达到其目的。但是现在我有几个其他的表包含不同类型的数据，虽然我可以为每个表创建一个单独的对话框并为每种类型手动添加表单字段，但我希望有一个更灵活的解决方案。

如何创建一个对话框，根据引用元素的类型添加表单字段？例如：如果我在一个表中有一个“水果”类型的对象，该对象具有“名称”、“颜色”、“价格”等属性，以及一个具有“名称”、“制造”、“制造”等属性的“汽车”类型对象马力'，我可以使用相同的对话框组件并动态创建表单吗？

【问题讨论】：

标签： html angular typescript angular-material

【解决方案1】：

当然可以做一个单一的通用动态表格，但是会变得太难了。只要只需要一种类型的对象的逻辑（例如，如果选择了字段“b”中的某个值，则禁用字段“a”）。

【讨论】：