重新使用角度6中的对话框组件[关闭]

Question

场景：

我有2个名为customers和workers的json文件：

顾客：

[
    {
        "cusId": "01",
        "customerName": "Customer One",
        "email": "[email protected]"
    },
    {
        "cusId": "02",
        "customerName": "Customer Two",
         "email": "[email protected]"
    },
    {
        "cusId": "03",
        "customerName": "Customer Three",
        "email": "[email protected]"
    }
]

工作人员：

[
    {
        "workId": "01",
        "workerName": "worker One",
        "email": "[email protected]"
    },
    {
        "workId": "02",
        "workerName": "worker Two",
         "email": "[email protected]"
    },
    {
        "workId": "03",
        "workerName": "worker Three",
        "email": "[email protected]"
    }
]

当我想删除客户json中的特定对象时，我会将特定对象注入dialog component，称为删除。在模板中，我将显示属性名称（Ex“customerName），如下面的代码（删除组件）：

<p>Do you want to delete <span>{{data.customerName}}</span></p>

这样用户就可以看到他正在删除哪个对象。对于customers对象，UI看起来像这样：

但是对于workers对象，属性名称更改为workerName，现在我只在对话框窗口中显示消息而不是属性名称（即workerName）：

需求：

• 除了消息，我想显示customers和workers的两个属性名称而不更改两个JSON文件中的属性名称。UI应如下所示：

对于客户：

对于工人：

• 现在我注入整个对象来删除组件，而不是我想只发出Id，Name属性（Ex customerName，workerName）到删除组件。

DEMO

Answer 1

如果您只有两种类型的JSON对象，则可以尝试此方法 -

{{data.customerName || data.workerName}}

Working Example

PS：但是如果在对话框组件中有多个不同的键，我建议在将数据传递给对话框组件时更好地传递自定义对象数据，以避免使用||（条件）运算符。如下 -

public openDialogDelete($event: ICustomer): void {
const dataToShow = {id: "000", name: "Name here", email: "[email protected]"}
  const dialogRef: MatDialogRef<DeleteComponent> = this.dialog.open(DeleteComponent, {
    width: '360px', disableClose: false, data: dataToShow,
});