Question

我创建了一个表，其中使用单选按钮设置前3行的优先级。目标是在选中/取消选中时启用/禁用兄弟姐妹单选按钮。我可以通过在每一行上提供相同的名称来垂直选中/取消选中按钮，但我无法横向对其兄弟姐妹这样做。

我尝试在输入元素上使用（[attr.disabled] =＆＃34; boolean＆＃34;）但禁用了表格中的所有按钮。我也尝试用javascript做它，但它使代码很长，但仍然不完美。

如果有人可以提供帮助!!

以下是我的代码。

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>

您可以简单地在* ngFor中声明索引，并使用它为每组单选按钮设置[name]属性。

Answer 2

我建议使用以下库：

PrimeNG

非常容易使用且非常强大。我用以下方式使用复选框：

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

如您所见，我根据函数getStatus（）返回的值禁用复选框：

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

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

您可以为收音机盒做类似的事情。您还可以利用name属性来实现目标。恐龙

Angular2在选中/取消选中时启用/禁用表格中的无线电输入

2 个答案: