Радиокнопка «Угловой материал» может выбирать несколько групп, но должна разрешать только один раз в группе - PullRequest
Новая
       28

Радиокнопка «Угловой материал» может выбирать несколько групп, но должна разрешать только один раз в группе

0 голосов
/ 14 марта 2019

У меня есть дерево угловых материалов с созданием флажков и переключателей, динамически основанных на массиве

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

{
    "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>

Пример углового дерева

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

enter image description here

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

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

<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>

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

1 Ответ

0 голосов
/ 28 мая 2019

Вы пытались разместить мат-радиогруппу за пределами мат-древа?Что-то вроде

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

...