Есть ли способ создать таблицу динамических материалов Angular в столбцах, а не в строках, с более сложным источником данных объекта?

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

Я также пробовал с простой таблицей, и она работает, но тогда представление выглядит не так, как должно. Каждый столбец заключен в <ng-container> и должен отображаться как новый столбец, но он отображает их в одном столбце. Я также пробовал подход с использованием div, и он отлично работает, но тогда я не могу сделать заголовок таблицы липким и фиксированным при прокрутке вниз. (также не рекомендуется использовать div внутри таблицы) Вот как моя таблица выглядит сейчас, пока что это лучший вариант:

 <table class="mat-table">
      <ng-container *ngFor="let elem of selectedCheckValues">
        <th class="mat-header-cell">{{ elem.name }}</th>
        <tr id="{{element}}" *ngFor="let element of elem.items; let idx=index;" (click)="onRowClick(elem, element)">
          <td class="mat-cell">{{element}}</td>
        </tr>
      </ng-container>
    </table>

И вот как выглядят мои данные:

export interface SelectedCheckValues {
  name: string;
  items: string[];
}

Где name должен быть заголовком таблицы, а элементы — элементами из столбца.


angular material-table html-table angular-material-table fixed-header-tables
person Catleen    schedule 25.05.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы хотите распределить серию вызовов по столбцам в мат-таблице, вам необходимо создать источник данных со столбцами.

Я сделал простой пример. В этом я предполагаю, что вы получаете данные с помощью forkJoin, поэтому у вас может быть что-то вроде

  dataSource:any[] = [];
  data=[0,1,2]
  headers:string[]=[]
  constructor(private dataService:DataService){}
  ngOnInit(){

    //we make a "typical" forkJoin where transform the "data" in an
    //array of "Observables" and use forkJoin
    forkJoin(this.data.map(x=>this.dataService.getData(x)))
    .subscribe((res:any[])=>{
       //when we has the response we "formed" the dataSource
       let i=0;
       let goon=true;
       this.headers=res.map(x=>x.name)
       while(goon)
       {
          const items=res.map(x=>x.items[i])
          goon=items.find(x=>x!==null)
          this.dataSource.push(items)
          i++;
       }
    })
  }

И .html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let header of headers;let i=index" [matColumnDef]="header">
    <th mat-header-cell *matHeaderCellDef>{{header}}</th>
    <td mat-cell *matCellDef="let element"> {{element[i]}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="headers"></tr>
  <tr mat-row *matRowDef="let row; columns: headers;"></tr>
</table>

См. stackblitz.

Кстати, матовая таблица с липкой - это только .css, поэтому вы можете использовать в качестве подхода обычную таблицу и .css для липкого заголовка.

Обновление: мне трудно представить, как вы получаете свои данные, если вы получаете их с помощью трех вызовов API

getMFTNO() //return some like [101,102,103]
getDF_RESULT() //return some like ["DL","FM","FT"]
getPERSNO() //return some like [0,000000,0000001]

И все API возвращают одинаковое количество элементов, идея состоит в том, чтобы использовать forJoin из трех вызовов и сопоставить с массивом объектов

forkJoin([this.getMFTNO(),this.getDF_RESULT(),this.getPERSNO()])
      .pipe(
        map(([mftno,dfResult,persno]:[any[],any[],any[]])=>{
          return mftno.map((x,index)=>(
          { 
            mftno:x,
            dfResult:dfResult[index],
            persno:persno[index]
          }
        ))
        }))

ПРИМЕЧАНИЕ. Я обновил stackblitz, чтобы учесть это.

person Eliseo    schedule 25.05.2021
comment
Спасибо за ваш ответ, но он не работает. Во-первых, если я использую ваш пример, размер столбцов будет равен размеру массива заголовков, что не очень хорошо (у меня столбцы разных размеров). Кроме того, при вашем подходе данные строятся по строкам, а не по столбцам. - person Catleen; 26.05.2021
comment
@Кэтлин, как ты получаешь данные? Я обновляю ответ в случае, если у нас три звонка (но в этом случае звонки зафиксированы). Извините, если только я вас запутал :( - person Eliseo; 26.05.2021

arrow_upward
0
arrow_downward

Небольшой фрагмент из моей таблицы с тем, как это выглядит.

введите здесь описание изображения

вместо

введите здесь описание изображения

person Catleen    schedule 26.05.2021