Question

我有一个对象列表，每个对象都处于嵌套结构中：例如：

{
"code" : 1,
"name" : "banks",
"isSelected" : false,
"children" : [ 
    [ 
        {
            "code" : 11,
            "name" : "bank1",
            "isSelected" : false,
            "children" : [ 
                [ 
                    {
                        "code" : 111,
                        "name" : "bank1.1.1",
                        "isSelected" : false

                    }, 
                    {
                        "code" : 112,
                        "name" : "bank1.1.2",
                        "isSelected" : false

                    }
                ]
            ]
        }, 
        {
            "code" : 12,
            "name" : "bank12",
             "isSelected" : false,
            "children" : [ 
                [ 
                    {
                        "code" :121,
                        "name" : "bank1.2.1",
                         "isSelected" : false,
                        "children" : [ 
                            [ 
                                {
                                    "code" : 1211,
                                    "name" : "bank1.2.1.1"
                                }
                            ]
                        ]
                    }, 
                    {
                        "code" : 122,
                        "name" : "bank1.2.2"
                    }
                ]
            ]
        }
    ]
]

}

嵌套层次是动态的，对象之间可能有所不同。在客户端，每个对象都是可以标记的单选按钮/复选框。

为了动态地执行此操作，我创建了一个单独的组件，其作用是遍历所有子项并将其显示在输入中。

在主要组件中：

<div *ngFor="let listTags of tags" >
              <h5>{{ listTags.name }}</h5>
               <app-radio-list-tags [tagsList]="listTags"></app-radio-list-tags>
              </div>

内部组件“ app-radio-list-tags”：

<div *ngFor="let children of tagsList.children">
 <div class="col-md-12 row"> 
        <div *ngFor="let child of children;">
          <div class="col-md-12" >
            <label 
              <input   class="form-control"  type="radio" name="groupName{{ tagsList.code }}"  id="tagId{{ child.code }}" [value]="child.name" 
              (change)="changeSelectedTags($event) />
               <span child.name}}</span>  
               <button class="btn" [hidden]="!child.children" (click)="openMdlChilderTag(child) " > </button>  
              </label></div> </div></div>div>

如果该子项具有子项，则再次调用该组件（从（click）=“ openMdlChilderTag（child）打开的模式中）

我使用BehaviorSubject来保存列表，并希望在每个选择中更新对象中的isSelected字段

公共标签=新的BehaviorSubject（[]）;

从每个内部对象中更改列表的最佳方法是什么（如果已选择）？并标记已经在屏幕上选择的那些？最后，我要遍历所有选定的对象并将它们放在单独的集中。

如何在（change）=“ changeSelectedTags（$ event）中更新服务中的列表“标签”？非常感谢

如何在动态嵌套结构中管理无线电选择

0 个答案: