Angular 6 PrimeNG-如何在一个列中添加具有不同值的复选框？

本文介绍了Angular 6 PrimeNG-如何在一个列中添加具有不同值的复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有用于创建Html表的Angular PrimeNG代码示例：

I have example Angular PrimeNG code for creating a Html Table:

<h3 class="first">Basic</h3>
<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>

<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

如何创建动态复选框（例如，在表格旁边的屏幕左侧）选项是基于列中的唯一值生成的？
（类似于

How to create a dynamic checkbox (e.g. on the left side of a screen next to a table) so that options are generated based on unique values from a column? (something like Amazon has on the left side of the screen):

并基于一次点击对于每个复选框-它会显示表中的行的子集...

And based on a click for each checkbox - it would show subset of rows in a table...

谢谢

推荐答案

您必须使用：< p-tableHeaderCheckbox [value] = car>< / p-tableHeaderCheckbox>

下面是一个示例：

 <p-table [value]="cars" [(selection)]="selectedCars">
        <ng-template pTemplate="header">
            <tr>
                <th style="width: 35px">
                   <p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
                </th>
                <th>Make</th>
                <th>Model</th>
                <th>Color</th>
             </tr>
         </ng-template>
         <ng-template pTemplate="body" let-car>
             <tr>
                 <td>
                     <p-tableCheckbox [value]="car"></p-tableCheckbox>
                 </td>
                 <td>{{car.make}}</td>
                 <td>{{car.model}}</td>
                 <td>{{car.color}}</td>                            
             </tr>
          </ng-template>
   </p-table>

看一下文档：

更新后的答案：

<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
    <div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox></div>
</div>

 selectedCities: string[] = [];

    selectedCategories: string[] = ['Technology', 'Sports'];

    checked: boolean = false;

您始终可以使用* ngFor

You can always create the checkboxes with a *ngForhttps://www.primefaces.org/primeng/#/checkbox

这篇关于Angular 6 PrimeNG-如何在一个列中添加具有不同值的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

primeNG