Как выбрать переключатель с помощью ngFor внутри каждого ряда с двумя переключателями - PullRequest
Новая
       8

Как выбрать переключатель с помощью ngFor внутри каждого ряда с двумя переключателями

0 голосов
/ 31 октября 2018

Этот раздел содержит HTML сторону, чтобы показать , как я перебираю массив объекта 

<div class="row" *ngFor="let item of modules; let i = index;">
                                        <div class="col-md-1 align-center">{{i+1}}</div>
                                        <div class="col-md-5">
                                            <input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}"
                                             disabled>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="radio" class="form-control" [(ngModel)]="modules[i].action.read" name="access" [value]="modules[i].action.read">
                                        </div>
                                        <div class="col-md-2">
                                            <input type="radio" class="form-control" [(ngModel)]="modules[i].action.write" name="access" [value]="modules[i].action.write">
                                        </div>
                                        <div class="col-md-2">
                                            <input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
                                        </div>
                                    </div>

Вот объект для ссылки. Я использую некоторый массив объектов. 

    modules = [{
    company_id: '0',
    role_id: 'xyz',
    module_name: 'xyz',
    action: {
        write: false,
        read: false
    },
    flag:false
  },{
    company_id: '0',
    role_id: 'xyz',
    module_name: 'xyt',
    action: {
        write: false,
        read: false
    },
    flag:false
  }];

1 Ответ

0 голосов
/ 31 октября 2018

Использовать уникальное имя для флажков:

См .: https://stackblitz.com/edit/angular-cymeqg?file=src%2Fapp%2Fapp.component.html

    <div class="row" *ngFor="let item of modules; let i = index;">
    <div class="col-md-1 align-center">{{i+1}}</div>
    <div class="col-md-5">
        <input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}" disabled>
</div>

<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read"  name="access_{{modules[i].company_id}}">
 </div>

<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write" (change)="modules[i].action.write" class="form-control" name="access_{{modules[i].company_id}}">
 </div>

 <div class="col-md-2">
<input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
</div>

</div>



modules = [{
    company_id: '0',
    role_id: 'xyz',
    module_name: 'xyz',
    action: {
        write: false,
        read: false
    },
    flag:false
  },{
    company_id: '1',
    role_id: 'xyz',
    module_name: 'xyt',
    action: {
        write: false,
        read: false
    },
    flag:false
  }];
...