angular - 在 Primeng 的表格中使用复选框时会自动选择所有行

Question

我正在使用 Primeng 并创建一个简单的 p 表，每行都有一个复选框。但是，当我选择该复选框时，每行上的所有复选框都会自动选中。我只想选择单击的复选框。

为什么要这样做？

我的代码:

<p-table #dt [columns]="header" [value]="data" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10,20,30]" sortMode="multiple">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th style="width: 50px"></th>
      <th *ngFor="let col of columns" style="width:150px" [pSortableColumn]="col.header">
        {{col.header}}
        <p-sortIcon [field]="col.header"></p-sortIcon>
      </th>
    </tr>
    <!--<tr>
      <th></th>
      <th *ngFor="let column of columns">
        <input pInputText type="text" style="width:130px" (input)="dt.filter($event.target.value, column.header, 'contains')">
      </th>
    </tr>-->
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td style="width:150px;">
        <p-checkbox name="coredata{{rowData.kennung}}" [(ngModel)]="selectedData" inputId="{{rowData.kennung}}"></p-checkbox>
      </td>
      <td style="width:150px;" pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input type="text" [(ngModel)]="rowData.kennung">
          </ng-template>
          <ng-template pTemplate="output">
            {{rowData.kennung}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>{{rowData.bezeichnung}}</td>
      <td>{{rowData.beschreibung}}</td>
    </tr>
  </ng-template>
</p-table> 

组件:

export class Stammdaten {
  constructor(public kennung: String, bezeichnung: String, beschreibung: String) { }
}

...
export class CoreDataComponent implements OnInit {

  selectedData: string[] = [];
  header: any[];
  data: Array<Stammdaten> = [];

  constructor() { }

  ngOnInit() {
    this.data.push(new Stammdaten('xyz', 'abc', 'beschr1'));
    this.data.push(new Stammdaten('xyz2', 'abc1', 'beschr2'));
    this.data.push(new Stammdaten('xyz3', 'abc2', 'beschr3'));
    this.data.push(new Stammdaten('xyz4', 'abc3', 'beschr4'));
    this.data.push(new Stammdaten('xyz5', 'abc4', 'beschr5'));

    this.header = [
      { field: 'kennung', header: 'Kennung' },
      { field: 'bezeichnung', header: 'Bezeichnung' },
      { field: 'beschreibung', header: 'Beschreibung' }
    ];
  }
}

Answer 1

我必须在复选框中使用 value 属性，如下所示 value="{{rowData.kennung}}"。