Question

场景：

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

客户：

[
    {
        "cusId": "01",
        "customerName": "Customer One",
        "email": "customer1@email.com"
    },
    {
        "cusId": "02",
        "customerName": "Customer Two",
         "email": "customer2@email.com"
    },
    {
        "cusId": "03",
        "customerName": "Customer Three",
        "email": "customer3@email.com"
    }
]

工人：

[
    {
        "workId": "01",
        "workerName": "worker One",
        "email": "worker1@email.com"
    },
    {
        "workId": "02",
        "workerName": "worker Two",
         "email": "worker2@email.com"
    },
    {
        "workId": "03",
        "workerName": "worker Three",
        "email": "worker3@email.com"
    }
]

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

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

以便用户可以看到他要删除的对象。 customers对象的UI如下所示：

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

要求：

与该消息一起，我要显示customers和workers的两个属性名称，同时不更改两个JSON文件中的属性名称。用户界面应如下所示：

对于客户：

对于工人：

现在我要将整个对象注入到删除组件，而不是我只想发出 Id ， Name 属性（例如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@gmail.com"}
  const dialogRef: MatDialogRef<DeleteComponent> = this.dialog.open(DeleteComponent, {
    width: '360px', disableClose: false, data: dataToShow,
});

重新使用角度为6的对话框组件

1 个答案: