迭代JSON对象并以角度打印多级值

问题描述

我必须遍历嵌套/多级 JSON 对象，并且需要创建一个多级菜单。

这是最终的 UI 视图。它需要为每个类别绑定名称、链接和图标。

我将从后端获取这种格式的 JSON 对象::

Clear-Host
do
{
    Add-Type -AssemblyName  System.Drawing,PresentationCore,PresentationFramework,System.Windows.Forms,Microsoft.VisualBasic
                            [System.Windows.Forms.Application]::EnableVisualStyles()

    $MessageBox = [Microsoft.VisualBasic.Interaction]

    $UserEmalAddreess = {
        $MessageBox::InputBox(
            'Enter Email Address of identity','User',$env:UserName
        )
    }

    $UserEmalAddreessAccess = {
        $MessageBox::InputBox(
            'Enter Email Address of person who gains/revokes access',$env:UserName
        )
    }

    $AddMailBoxPermission = {
        $AddMailBoxPermissionSplat = @{
            Identity        = (& $UserEmalAddreess)    
            InheritanceType = 'All'
            User            = $(& $UserEmalAddreessAccess)
            AccessRight     = 'FullAccess'    
        }
        Add-MailBoxPermission @AddMailBoxPermissionSplat
    }


    $BannerLine = $(('=') * 16)

    function Show-Menu
    {
        param 
        (
            [string]$Title = '365 Exchange Admin'
        )

        Clear-Host
        "$BannerLine $Title $BannerLine"

        '1: Connect to PS Exchange Online'
        '2: Give Access To MailBox - No AutoMapping'
        '3: Give Access To MailBox - With AutoMapping'
        '4: Get MailBox Permissions'
        '5: Remove MailBox Permissions'
        '6: Create A Shared MailBox'
        '7: Convert To Shared MailBox'
        '8: Get MailBox Info'
        '9: Set New 365 Password'
        "Q: Press 'Q' to quit."
    }
    Show-Menu

    $selection = Read-Host Please make a selection

    switch ($selection)
    {
        '1'
        {
            $MFAExchangeModule = (
                                    (Get-ChildItem -Path $("$env:LOCALAPPDATA\Apps\2.0\") -Filter 'CreateExoPSSession.ps1' -Recurse).FullName | 
                                    Select-Object -Last 1
                                 )
            . $MFAExchangeModule
            Connect-EXOPSSession 
        } 
        '2' 
        {
            & $AddMailBoxPermission -Automapping $false | 
            Out-Host
        } 
        '3' 
        {
            & $AddMailBoxPermission -Automapping $true | 
            Out-Host
        } 
        '4'
        {
            Get-MailBoxPermission -Identity $(& $UserEmalAddreess) | 
            Format-List
        } 
        '5'
        {
            $RemoveMailBoxPermission = @{
                Identity        = $(& $UserEmalAddreess)
                User            = $(& $UserEmalAddreessAccess)
                AccessRights    = 'FullAccess'
                InheritanceType = 'All'
            }

            Remove-MailBoxPermission @RemoveMailBoxPermission | 
            Out-Host

        } 
        '6' 
        {
            New-MailBox -Name $(& $UserEmalAddreess) -Shared | 
            Out-Host
        } 
        '7' 
        {
            Set-MailBox $(& $UserEmalAddreess) -Type Shared | 
            Out-Host
        } 
        '8'
        {
            Get-MailBox -Identity $(& $UserEmalAddreess) | 
            Format-Table Name,RecipientTypeDetails
        } 
        '9'
        {
            $Creds = Get-Credential -Credential "$env:UserName@$env:USERDNSDOMAIN"
            $setMsoluserPasswordSplat = @{
                UserPrincipalName     = $Creds.UserName
                NewPassword           = $Creds.GetNetworkCredential().Password
                ForceChangePassword   = $False
            }

            Set-MsoluserPassword @setMsoluserPasswordSplat | 
            Out-Host
        } 
        'Q' {return}
    }
}
until ($inputChoice -eq 'q')

有人可以帮我分离上述数据吗？任何帮助，将不胜感激。谢谢。

解决方法

正如@Ravindra 所说，这可以通过递归来完成

<ul>
  <li *ngFor="let menuItem of menuData"> {{ menuItem.name }}
    <ng-container *ngIf="menuItem.subMenu">
      <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
    </ng-container>
  </li>
</ul>

<ng-template #inner let-subMenu="subMenu">
  <ul>
    <li *ngFor="let menuItem of subMenu">
      {{ menuItem.name }}
      <ng-container *ngIf="menuItem.subMenu">
        <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
      </ng-container>
    </li>
  </ul>
</ng-template>

See this Demo