选中/未选中时，Angular2启用/禁用表中的无线电输入

Question

I've created a table where the priority of top 3 rows are set by using radio buttons. Goal is to make the siblings radio buttons enabled/disabled when checked/unchecked. I'm able to get the buttons checked/unchecked vertically by providing the same name on each row but I'm not being able to do that to it's siblings horizontally.

I've tried using ([attr.disabled]="boolean") on input element but that disables all the buttons in the table. I also tried doing it with javascript but it makes the code really long which is still not perfect.

If anyone could help !!

Below is my code.

HTML

<tr *ngFor="let news of newss">
<td>{{ news.newstitle }}</td>
<td>{{ news.newsdescription }}</td>
<td>{{ news.display }}</td>
<td>{{ news.status }}</td>
<td><span> {{ news.photo }}</span></td>
<td>
  <div class="radio">
    <label><input type="radio" name="priority1" #priority1 
  (change)="handleChange($event, news, priority1)" 
  [attr.disabled]="disprior1" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority2" #priority2 
  (change)="handleChange($event, news, priority2)" 
  [attr.disabled]="disprior2" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority3" #priority3 
  (change)="handleChange($event, news, priority3)" 
  [attr.disabled]="disprior3" /></label>
  </div>          
</td>
</tr>  

TS:

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

Answer 1

<tr *ngFor="let news of newss; let i = index">
<td>{{ news.newstitle }}</td>
<td>{{ news.newsdescription }}</td>
<td>{{ news.display }}</td>
<td>{{ news.status }}</td>
<td><span> {{ news.photo }}</span></td>
<td>
  <div class="radio">
    <label>
       <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
    </label>
  </div>
  <div class="radio">
    <label>
       <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
   </label>
  </div>
  <div class="radio">
    <label>
        <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
    </label>
  </div>          
</td>
</tr> 

you can simply declare the index in *ngFor and use it to set the [name] attribute for each group of radio buttons.

Answer 2

May I suggest the use of the following libraries:

PrimeNG

very easy to use and very powerful. I use check boxes in the following way:

<p-checkbox *ngFor="let part of partsLoaded; let i = index"
                        name="group1"
                        label="{{ part }}"
                        value="{{ part }}"
                        [(ngModel)]="selectedParts"
                        (click)="showOrHidePart()"
                        (mouseover)="selectMesh(part, i)"
                        (mouseout)="deSelectMesh(part, i)"
                        [class.active]="i == selectedMeshIndex"
                        [class.no-mesh]="getStyle(part)"
                        [disabled]="getStatus(part)">{{ part }}
            </p-checkbox>

as you can see I disable the check boxes according to the value returned by the function getStatus():

getStatus(part) {
        let selectedMesh = this.meshCollection.find(obj => obj.name === part).object;

        if (selectedMesh) {
            return false;
        } else {
            return true;
        }
    }

You can do something similar for your radio boxes. You can also leverage the use of name property to accomplish your goal. Dino