如何显示此列表结构？角

Question

'图片a'是我从AJAX调用中获取的数据。当一个任务的“ dependencyTaskId”等于另一个任务的ID时，它将成为该任务的子代。如果'dependencyTaskId'为null，则该任务将处于顶层。最终结果将显示所有任务的树形结构（“图片b”）。

我正在使用Angular6。如何实现此目标？请帮我。非常感谢。

  "orderId": 879530,
  "status": "Processing",
  "dateCreated": "2019-11-30T20:47:23.953",
  "dateCommitted": "2019-11-30T20:47:25.627",
  "dateModified": "2019-11-30T20:47:25.377",
  "coreProducts": [
    {
      "coreProductId": 1597739,
      "serviceAddress": {
        "addressId": 7506180,
        "locationId": "3472036",
        "floor": null,
        "buildingName": null,
        "flatNumber": null,
        "streetNumber": "30",
        "streetNumberSubDescription": null,
        "streetName": "LOGIE",
        "streetDirection": null,
        "suburb": "STOKES VALLEY",
        "city": "LOWER HUTT",
        "postCode": "5019",
        "freeTextAddressOverride": null,
        "attentionTo": null,
        "careOf": null,
        "addressType": "Service",
        "addressAccessInformation": null
      },
      "coreProductKey": "NGA1000/500",
      "contractLength": 12,
      "requestedDateOfProvisioning": "2019-12-07T00:00:00",
      "installationInstructions": null,
      "coreProductComponents": [
        {
          "coreProductComponentId": 2245296,
          "serviceIdentifier": "KoR157510004402",
          "service": "Internet",
          "ratePlan": "OR_access_NGA1000/500_U_Sep2019",
          "overrideCharge": 0,
          "electricityPriceOverrides": null
        }
      ],
      "coreProductCharges": null
    }
  ],
  "additionalProducts": [],
  "hardwareOrders": [
    {
      "hardwareOrderId": 1829471,
      "deliveryAddress": {
        "addressId": 7506179,
        "locationId": "3472036",
        "floor": null,
        "buildingName": null,
        "flatNumber": null,
        "streetNumber": "30",
        "streetNumberSubDescription": null,
        "streetName": "LOGIE",
        "streetDirection": null,
        "suburb": "STOKES VALLEY",
        "city": "LOWER HUTT",
        "postCode": "5019",
        "freeTextAddressOverride": null,
        "attentionTo": null,
        "careOf": null,
        "addressType": "Courier",
        "addressAccessInformation": null
      },
      "linkedServiceIdentifier": "KoR157510004402",
      "contract": null,
      "hardwareOrderItems": [
        {
          "hardwareOrderItemId": 1828173,
          "key": "NetCommNF18ACV_FIBRE_OR",
          "type": null
        }
      ]
    }
  ],
  "account": {
    "accountId": 1939814,
    "customers": [
      {
        "customerId": 1935666,
        "firstName": "CC1FE844",
        "lastName": "D007C",
        "middleName": "",
        "email": "[email protected]",
        "homePhoneNumber": null,
        "mobilePhoneNumber": "0212727822",
        "workPhoneNumber": null,
        "faxNumber": null,
        "dateOfBirth": "1956-03-05T00:00:00",
        "address": {
          "addressId": 7506178,
          "locationId": "3472036",
          "floor": null,
          "buildingName": null,
          "flatNumber": null,
          "streetNumber": "30",
          "streetNumberSubDescription": null,
          "streetName": "LOGIE",
          "streetDirection": null,
          "suburb": "STOKES VALLEY",
          "city": "LOWER HUTT",
          "postCode": "5019",
          "freeTextAddressOverride": null,
          "attentionTo": null,
          "careOf": null,
          "addressType": "PostalPhysical",
          "addressAccessInformation": null
        }
      }
    ],
    "organisationType": null,
    "organisationReference": null,
    "address": {
      "addressId": 7506177,
      "locationId": "3472036",
      "floor": null,
      "buildingName": null,
      "flatNumber": null,
      "streetNumber": "30",
      "streetNumberSubDescription": null,
      "streetName": "LOGIE",
      "streetDirection": null,
      "suburb": "STOKES VALLEY",
      "city": "LOWER HUTT",
      "postCode": "5019",
      "freeTextAddressOverride": null,
      "attentionTo": null,
      "careOf": null,
      "addressType": "PostalPhysical",
      "addressAccessInformation": null
    }
  },
  "losingServiceProviders": [
    {
      "losingServiceProviderId": 677663,
      "serviceIdentifier": "KoR157510004402",
      "serviceProvider": "ihug",
      "accountName": "CEDC5BFE-53EE-4319",
      "accountNumber": "20387451"
    }
  ],
  "questions": [
    {
      "questionAnswerId": 6329580,
      "question": "LiveThereOrMovingIn",
      "answer": "LiveThere",
      "serviceIdentifier": "KoR157510004402"
    },
    {
      "questionAnswerId": 6329581,
      "question": "WhatServicesCurrentlyHave",
      "answer": "BroadbandOnly",
      "serviceIdentifier": "KoR157510004402"
    }
  ],
  "promoCodes": [
    {
      "promoCodeId": 2168141,
      "promoCode": "GIGANTIC_PROMO",
      "serviceIdentifier": "KoR157510004402"
    }
  ],
  "tasks": [
    {
      "taskId": 7670266,
      "name": "ChorusGatewayNGAConnectPrimary",
      "description": "Creates Chorus Gateway NGA NewConnection ticket",
      "displayName": "Chorus Gateway NGA Connect Primary",
      "dateStarted": "2019-11-30T20:47:34.617",
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "CoreProducts",
      "taskSourceId": "1597739",
      "dependencyTaskId": null,
      "ticketId": 36503526,
      "ticketStatus": "With Provider",
      "ticketPercentageComplete": 40,
      "externalReferenceId": null,
      "hasFailure": false,
      "failureReason": "Complete"
    },
    {
      "taskId": 7670268,
      "name": "InternetActivation",
      "description": "*InternetActivation",
      "displayName": "Internet Activation",
      "dateStarted": null,
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "CoreProducts",
      "taskSourceId": "1597739",
      "dependencyTaskId": 7670266,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": null,
      "failureReason": null
    },
    {
      "taskId": 7670271,
      "name": "InternetUsageEvaluation",
      "description": "Evaluates if the customer has internet usage",
      "displayName": "Internet Usage Evaluation",
      "dateStarted": null,
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "CoreProducts",
      "taskSourceId": "1597739",
      "dependencyTaskId": 7670268,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": null,
      "failureReason": null
    },
    {
      "taskId": 7670272,
      "name": "CustomerCoreProductInsert",
      "description": "Store LineNumber/Service data of a CoreProduct to customer tables.",
      "displayName": "Customer Core Product Insert",
      "dateStarted": null,
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "CoreProducts",
      "taskSourceId": "1597739",
      "dependencyTaskId": 7670268,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": null,
      "failureReason": null
    },
    {
      "taskId": 7670273,
      "name": "NoUsageComms",
      "description": "*NoUsageComms",
      "displayName": "No Usage Comms",
      "dateStarted": null,
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "CoreProducts",
      "taskSourceId": "1597739",
      "dependencyTaskId": 7670266,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": null,
      "failureReason": null
    },
    {
      "taskId": 7670269,
      "name": "Hardware",
      "description": "*Hardware",
      "displayName": "Order Hardware",
      "dateStarted": "2019-11-30T20:51:41.22",
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "HardwareOrders",
      "taskSourceId": "1828173",
      "dependencyTaskId": 7670266,
      "ticketId": 36503527,
      "ticketStatus": "Scheduled",
      "ticketPercentageComplete": 10,
      "externalReferenceId": null,
      "hasFailure": false,
      "failureReason": "Complete"
    },
    {
      "taskId": 7670270,
      "name": "PromoCode",
      "description": "Promo code task",
      "displayName": "Promo Code Task",
      "dateStarted": null,
      "dateCompleted": null,
      "dateScheduled": null,
      "taskSource": "PromoCodes",
      "taskSourceId": "2168141",
      "dependencyTaskId": 7670268,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": null,
      "failureReason": null
    },
    {
      "taskId": 7670267,
      "name": "SaveQuestionsAndAnswers",
      "description": "Save Questions And Answers",
      "displayName": "Save Questions And Answers",
      "dateStarted": "2019-11-30T20:47:33.307",
      "dateCompleted": "2019-11-30T20:47:33.307",
      "dateScheduled": null,
      "taskSource": "SaveQuestionsAndAnswers",
      "taskSourceId": "6329580",
      "dependencyTaskId": null,
      "ticketId": null,
      "ticketStatus": null,
      "ticketPercentageComplete": null,
      "externalReferenceId": null,
      "hasFailure": false,
      "failureReason": "Complete"
    }
  ],
  "fulfilmentItems": []
}

Answer 1

您必须通过前端进行尝试：

const nestedChild = (itemArray, responseArray = [], dependancyTaskId = null) => {
    for(let i in itemArray) {
        if(itemArray[i].dependancyTaskId == dependancyTaskId) {
            const children = nestedChild(itemArray, responseArray, itemArray[i].taskId)

            if(children.length) {
                itemArray[i].children = children
            }
            responseArray.push(itemArray[i])
        }
    }
    return responseArray
}

const responseArray = [];
const response = nestedChild(tasks);

现在您可以遍历并将其打印在无序列表中，并可以通过CSS对其进行格式化。

希望这对您有很大帮助。

Answer 2

您可以使用angular-tree-component显示任务。

为了使用此组件，您必须将平面任务数组变成节点树，其中每个节点都包含对其子节点的引用。这可以使用简单的递归函数来完成。

工作示例：https://stackblitz.com/edit/angular-tree-component-u3gmlp-r9hqpg

（（您可能希望对其进行配置，使其看起来更像您提供的屏幕截图）