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}}"。

当在Primeng中的表中使用它时，复选框自动选择所有行

1 个答案: