Блог

У меня есть источник данных из сервиса, подобного следующему.

 this.ateco2007 = [{code:  this.anagrafica?.ateco2007?.code, description: this.anagrafica?.ateco2007?.description}]

if(this.anagrafica?.atecoSecondari amp;amp; this.anagrafica?.atecoSecondari.length > 0) {
   let i = 0;
   for(let elem of this.anagrafica.atecoSecondari) {
      this.atecoSecondari.push({
         index: i  ,
         code: elem.code,
         description: elem.description
      });
   }
 

…где ateco2007 всегда имеет один элемент, вместо этого atecoSecondari может иметь несколько значений. Но всегда есть пара код / описание.

Я хочу показать эти данные в таблице. Первая строка всегда будет одной строкой (ateco 2007), других строк может быть несколько.

Мне нужна такая структура, как эта:

В первом столбце всегда будет указано исправление с меткой, во втором столбце показан код, а в последнем — описание.

Я попробовал следующее, это почти правильно:

Но я хочу добиться чего-то более близкого к следующему:

Как вы видите, есть что-то вроде rowspan, а во втором и третьем столбцах строки имеют границы и находятся в одной строке.

Я попробовал следующий код:

 <p-table [value]="ateco2007" [autoLayout]="true">
  <ng-template pTemplate="body">
    <tr>
      <td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
      <td>{{ateco2007[0]?.code}}</td>
      <td class="text-left">{{ateco2007[0]?.description}}</td>
    </tr>
    <tr>
      <td rowspan="atecoSecondari.length" class="font-weight-bold">
        {{'cliente.atecoSecondari'|translate}}</td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td>{{elem.code}}</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr *ngFor="let elem of atecoSecondari">
            <td class="text-left">{{elem.description}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </ng-template>
 

Но я не знаю, лучший ли это способ построить таблицу.

Я решил это таким образом

  <p-table [value]="ateco2007" [autoLayout]="true">
   <ng-template pTemplate="body" let-rowIndex="rowIndex">
     <tr>
       <td class="font-weight-bold"> {{'cliente.ateco'|translate}}</td>
       <td>{{ateco2007[0]?.code}}</td>
       <td class="text-left">{{ateco2007[0]?.description}}</td>
     </tr>
     <tr *ngFor="let elem of atecoSecondari">
       <td *ngIf="rowIndex == elem.index" [attr.rowspan]="atecoSecondari.length" class="font-weight-bold">
         {{'cliente.atecoSecondari'|translate}}
       </td>
       <td>{{elem.code}}</td>
         <td class="text-left">{{elem.description}}</td>
      </tr>
   </ng-template>
 </p-table>
 

Я добавил диапазон строк и изменил структуру.