Блог

У меня есть дерево angular-material с возможностью создания флажков и переключателей динамически на основе массива

Массив следующим образом:

 {
    "Documents": {
      "angular": {
        "src": {
          "core": 0,
          "compiler": 0
        }
      },
      "material2": {
        "src": {
          "button": 1,
          "checkbox": 1,
          "input": 1
        }
      }
    }............................etc
}
  

html-часть следующим образом:

 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
    <div *ngIf="node.type;else other_content"> <!--- node.type == 1 then checkbox!-->
      <mat-checkbox>Check me!</mat-checkbox>
</div>

<ng-template #other_content><!--- node.type ==0 then radio button!-->
  <mat-radio-group>
  <mat-radio-button value=" {{node.filename}}">{{node.filename}}</mat-radio-button>
</mat-radio-group>
</ng-template>

  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle '   node.filename">
      <mat-icon>
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.filename}} : {{node.type}}
  </mat-tree-node>
</mat-tree>
  

Пример ссылки на угловое дерево

Это выглядит следующим образом:

Проблема в том, что, как показано на рисунке, я могу проверить все переключатели на определенном уровне дерева. Но он должен разрешать только один переключатель из группы переключателей.

Проблема возникает из-за приведенного ниже:

 <loop .....>

<mat-radio-group>
  <mat-radio-button value=" {{node.filename}}">{{node.filename}}</mat-radio-button>
</mat-radio-group>
</loop end>
  

Но за одну итерацию создается один набор <mat-radio-group> , но он должен создаваться, как показано ниже:

 <mat-radio-group>
      loop through <mat-radio-button>
    </mat-radio-group>
  

Что мне следует сделать, чтобы в определенной группе можно было выбрать только переключатель?

Вы пытались поместить mat-radio-group за пределы mat-tree? Что-то вроде

 <mat-radio-group>
    <mat-tree>
       <mat-tree-node>
            <mat-radio-button></mat-radio-button>
        </mat-tree-node>
    </mat-tree>
</mat-radio-group>
  

 <!-- 
You need to set name to be unique for every radio button.
If there are more radio buttons with the same name they will become a group.
-->
<mat-radio-button
 *ngFor="let btn of this.radioButtons"
 [name]="btn.Id"
 [checked]="btn.checked"
>
</mat-radio-button>