在primeng表中預選復選框-有解無憂

我需要預先選擇primeng表中的前20行我嘗試了以下操作，但它給出了一個錯誤，無法系結到'checked'，因為它不是p-checkbox的已知屬性我嘗試用ngModel替換為寫在帖子中但無濟于事


  <ng-template pTemplate="body" let-transaction let-expanded="expanded">

        <tr [pSelectableRow]="transaction">

            <td [hidden]='!isMultiSign'><p-tableCheckbox [checked]='isSelected(transaction)'

                 [value]='transaction' (onChange)='check(transaction)' [pSelectableRow]='transaction'>

            </p-tableCheckbox></td>

uj5u.com熱心網友回復：

選擇由表的選擇值定義。我編輯了primeng的示例供您展示：

html

<p-toast></p-toast>

<div class="card">
  <h5>Checkbox Selection</h5>
  <p>
    Multiple selection can also be handled using checkboxes by enabling the
    selectionMode property of column as "multiple".
  </p>

  <!-- see the selection binding here -->
  <p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code">
    <ng-template pTemplate="header">
      <tr>
        <th style="width: 3rem">
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>
          <p-tableCheckbox [value]="product"></p-tableCheckbox>
        </td>
        <td>{{ product.code }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.category }}</td>
        <td>{{ product.quantity }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [MessageService],
})
export class AppComponent {
  products: Product[];

  selectedProducts3: Product[];

  constructor(
    private productService: ProductService,
    private messageService: MessageService
  ) {}

  ngOnInit() {
    this.productService.getProductsSmall().then((data) => {
      this.products = data;
      // selects the first 2
      this.selectedProducts3 = data.slice(0, 2);
    });
  }

  selectProduct(product: Product) {
    this.messageService.add({
      severity: 'info',
      summary: 'Product Selected',
      detail: product.name,
    });
  }

  onRowSelect(event) {
    this.messageService.add({
      severity: 'info',
      summary: 'Product Selected',
      detail: event.data.name,
    });
  }

  onRowUnselect(event) {
    this.messageService.add({
      severity: 'info',
      summary: 'Product Unselected',
      detail: event.data.name,
    });
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531384.html

標籤：有角度的普门底漆表primeng-复选框

上一篇：(ANGULAR-12)Mat-paginator在條件后更改頁面

下一篇：“Observable<unknown>”型別的引數不可分配給“OperatorFunction<Object,unknown>”型別的引數