как динамически отображать данные строки для таблицы в angular 7

Question

У меня есть страница HTML, на которой я хочу создать таблицу. Столбцы в этой таблице имеют динамический c, что означает, что они загружаются с сервера в переменную в компоненте с использованием любого типа []. Данные в этой таблице также являются динамическими c, что означает, что во время программирования я не знаю, какие столбцы и данные будут связаны в таблице.

Я пробовал код ниже, но он похоже, не работает или выдает ошибку. Он просто создает в теле пустой td. Expense.component. html

    <div id="invoice-items-details" class="pt-2">
     <div class="row">
         <div class="table-responsive col-sm-12">
           <table class="table">
             <thead>
             <tr>
              <th class="text-left" *ngFor = "let column of displayColumns">
                {{column.name}}
              </th>                                                                        
             </tr>
       </thead>
     <tbody>
           <tr *ngFor="let list of userInfoList ; let i=index">
              <td *ngFor="let key of list | keyvalue" > 
               {{key.value}}
             </td>
           </tr>
    </tbody>                                    
    </table>
    </div>
    </div>                                                    
  </div>

мой динамический c список столбцов displayColumns =

[ 
{name: "S.No", value: "sNo"}
{name: "Customer", value: "CustomerName"}
{name: "Quantity", value: "Quantity"}
{name: "Weight", value: "Weight"}
{name: "TotalAmount", value: "TotalAmount"}
{name: "TotalOrders", value: "TotalOrders"}
] 

- этот массив будет приходить динамически ... и данные моей строки

userInfoList =[ 
{CustomerName: "bindu", Quantity: "4232", Weight: "8970.9700", TotalAmount: "28810924.31", TotalOrders: "135", sNo =1}
{CustomerName: "hima", Quantity: "54", Weight: "104.0000", TotalAmount: "168268.00", TotalOrders: "3", sNo:2}
{CustomerName: "testby bindu", Quantity: "23", Weight: "12.0000", TotalAmount: "20076.00", TotalOrders: "1", sNo:3}
{CustomerName: "Bindu", Quantity: "23", Weight: "33.0000", TotalAmount: "51870.00", TotalOrders: "1", sNo:4}
 {CustomerName: "test", Quantity: "117", Weight: "282.0000", TotalAmount: "974760.72", TotalOrders: "9", sNo:5}

этот массив также поступает динамически ..

я загружаю данные также, но порядок отсутствует в столбце уважения, поэтому colud u, пожалуйста, предложите мне слот ниже того, что я получаю данные, через имя столбца.

Answer 1

Вы можете построить конвейер для преобразования ваших данных.

Вы можете взглянуть на эту демонстрацию Stackblitz .

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

Тогда вы можете использовать его как это:

<tr *ngFor="let user of userInfoList">
  <td *ngFor="let columnData of (user | fixColumnOrder: displayColumns)">
    {{columnData}}
  </td>
</tr>

[БОКОВАЯ ЗАМЕТКА]: Иногда, когда вас беспокоит производительность (повторное выполнение канала снова и снова для всех данных), вы можете использовать метод мемоизации, чтобы избежать этого, или просто используйте для этого библиотеку, например memo-decorator. К сожалению, в этом случае это не очень поможет, потому что каждая строка содержит разные данные, но приятно знать, что такая библиотека доступна.

npm install --save memo-decorator

import memo from 'memo-decorator';

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  @memo()
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

Answer 2

Одним из быстрых обходных путей может быть прямой доступ к свойствам с помощью свойства value переменной displayColumns. Попробуйте следующее

<div id="invoice-items-details" class="pt-2">
  <div class="row">
    <div class="table-responsive col-sm-12">
      <table class="table">
        <thead>
          <tr>
            <th class="text-left" *ngFor="let column of displayColumns">
              {{column.name}}
            </th>                                                                        
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let list of userInfoList; let i=index">
            <td *ngFor="let column of displayColumns">
              {{ list[column['value']] }}
            </td>
          </tr>                                                                        
        </tbody>                                    
      </table>
    </div>
  </div>                                                    
</div>

Answer 3

здесь вы можете проверить живой рабочий пример:

В этом динамике c данные отображаются в строке таблицы в Angular 9, и с этим видео на YouTube вы легко получите.

Dynami c данные в строке таблицы angular 9

Спасибо