检查 angular cli 中的单选按钮组

Question

我一直在尝试使用 ngFor 在 angular 中的每组单选按钮上检查按钮，它只在循环的最后一组上工作，即只检查最后一个单选组上的按钮.如何检查循环的每个无线电组上的按钮？那就是下面的代码。我正在使用 Angular 8

html 文件

<form >
  <div class="row px-5">
    <div class="col-sm-12 col-md-4 px-4" *ngFor="let data of myData">
        <input class="form-control mt-3" type="text"  value="{{data.name}}" name="name" />

        <div *ngFor="let status of accessorStatus">
             <input class="" type="radio" name="statuses" [value]="status" [(ngModel)]="data.status"/><span class="text-white ctrl-font ml-2">{{status}}</span>
         </div>
    </div>
    <div class="text-right py-5">
       <button  class="save-btn py-3 px-5 ml-4 mr-5" type="submit" (click)="saveUpdate()">save</button> 
    </div>
</form>

ts 文件

import { Component, OnInit } from "@angular/core";
import { PortalService } from '../portal.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

@Component({
    templateUrl: './edit-candidate.component.html',
    styleUrls: ['./edit.component.css']
})

export class EditComponent implements OnInit{

    public candidate
    public accessors = [];
    public accessorStatus = [
        'sent', 'received', 'accepted', 'disproved'
    ];

    constructor(private portalService: PortalService,
        private route : ActivatedRoute, private fb: FormBuilder,
        private router : Router
        ){
    }

    ngOnInit(){

        this.getCandidate(this.route.snapshot.params['id']) 
    }

    getCandidate(id){
        this.portalService.getCandidate(id)
        .subscribe((data) => {
            this.candidate = data;
            data.accessor.map(item => {
                this.accessors.push(item);
            });
        })
    }
    saveUpdate(){
        let id = this.route.snapshot.paramMap.get('id')
    this.portalService.updateCandidate(id, this.accessors).subscribe((data)=> {
        this.router.navigate(['candidate-list'])
        console.log(data)
    })        
    }
}

Answer 1

您需要为每个 "data" 指定一个不同的 name。在外循环中添加一个 let i=index 并使用 [name]="'statuses'+i"

<div *ngFor="let data of myData;let i=index">
    ...
    <div *ngFor="let status of accessorStatus">
       <input class="" type="radio" [name]="'statuses'+i" [value]="status" ...>
   </div>
</div>

检查 angular cli 中的单选按钮组

Checking radio buttons groups in angular cli

radio-button

typescript

angular

angular8