Home / Questions / 300867
Accepted
Jhoa Khriz
Asked: 2020-10-15 17:41:54 +0800 CST 2020-10-15 17:41:54 +0800 CST

如何使用 PrimeNG 在 Angular 中调整列的大小？

  • 772

你能帮我如何修改Angular中我使用PrimeNG的列的大小吗？我拥有的表调用存储在数据库中的数据，我们从 .ts 调用它，但根据我拥有的代码，ID 的大小非常宽。

参考图像

HTML 

    <p-table #dt [columns]="columnas" [value]="preguntas" selectionMode="single" [(selection)]="preguntaSeleccionada" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15">
      <ng-template pTemplate="caption">
        <h3> Lista de Preguntas </h3>
        <div style="text-align: left">
          <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
          <input type="text" pInputText size="50" placeholder="Filtro Global" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></div>
      </ng-template>
      <ng-template pTemplate="header" let-columns>
        <tr class="text-center">
          <th *ngFor="let col of columns" [pSortableColumn]="col.field">
            {{col.header}}
            <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
          </th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
          <td *ngFor="let col of columns">
            {{rowData[col.field]}}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="summary" let-rowData>
        <div style="text-align:left">
          <button type="button" pButton icon="fa fa-plus" routerLink="../agregarPregunta" class="ui-button-rounded" style="margin-left: 10px" role="button" routerLinkActive="active" label="Nueva pregunta"></button>
        </div>
      </ng-template>
    </p-table>

.TS 部分

    constructor(private servicePre: PreguntasService, private router: Router) { }`
    ngOnInit() {
    this.listar();
    this.columnas = [
      { field: 'preguntas_Id', header: 'Id', size: '11' },
      { field: 'preguntas_Descripcion', header: 'Descripcion' },
      { field: 'preguntas_Estado', header: 'Estado' },
    ];
  `}`
 `listar() {
    this.servicePre.getPregunta().subscribe(data => {
      this.preguntas = data;
    });
  }`
angular

1 Answers

  1. Best Answer

    您可以使用 [width]/witdh，这取决于您是否希望大小是动态的。标题和正文必须具有相同的大小。

      <ng-template pTemplate="header" let-columns>
    <tr class="text-center">
      <th *ngFor="let col of columns" [pSortableColumn]="col.field" [width]="col.width">
        {{col.header}}
        <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns" [width]="col.width">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
    • 0