Angular

Question

我正在完成一个项目，其中有 3 个选择，每个选择有 3 个不同的值。我正在使用 PrimeNG，并且这些单选按钮位于具有可扩展行的 table 中（尽管除了一些 UI 差异之外它应该没什么大不了的）。

值和按钮存储在 ngFor 中，因为有多个类别，其中按钮是一个选项。

我遇到的问题是，当您 select 1 个值时，整行会同时 selected。

我相信这一定与 ngFor 以及每个类别的数据如何 displayed/looped 有关。每个“类别”都将是一个对象，其中适当的值是该对象的一部分。例如，“测试类别 1”的对象可能是：

{
  Option1: 1,
  Option2: 2,
  Option3: 2
}

其中 0 表示“none”，1 表示“查看”，2 表示“编辑”。

这是我在 ng-template 中重复单选按钮的代码：

<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
      <td [attr.colspan]="columns.length + 1">
        <div class="perm-grid">
          <div *ngFor="let item of rowData.permissions">
            <h2 style="border-bottom: 1px solid #495057; padding-left: 5px">{{ item.name }}</h2>
            <ul class="perm-list">
              <li class="radio-grid">
                <div class="radio-grid-row">
                  <div style="margin-left: 5px"></div>
                  <div>Option1</div>
                  <div>Option2</div>
                  <div>Option3</div>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">None</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="0">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="0">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="0">
                  </p-radioButton>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">View</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="1">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="1">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="1">
                  </p-radioButton>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">Edit</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="2">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="2">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="2">
                  </p-radioButton>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>

为简单起见，我将在 StackBlitz.

中提供其余代码

有谁知道为什么一次 select 编辑整行？以前，当我 select 编辑一个选项时，它不是整行，而是所有类别都具有相同的值。例如，如果我 select 在选项 2 中输入“查看”，这将反映在所有类别中。

Answer 1

看看你的选项变量值

  Option1: string;
  Option2: string;
  Option3: string;

它们没有被初始化，即等于未定义。所以

item[Option1] == item[Option2] == item[undefined]

此代码必须正常工作：

Option1: string = 'Option1';
Option2: string = 'Option2';
Option3: string = 'Option3';

Angular - 单选按钮行被选中而不是唯一单选 ngFor primeng

Angular - Row of Radio Buttons Being Selected Instead of Unique Radio ngFor primeng

javascript

ngfor

primeng