Блог

Ищу способ упорядочить свойства порядка JavaScript по предопределенному списку, т.е. Не отсортированному по алфавиту и не сортирующему записи по указанному свойству. Я понимаю, что это невозможно. Смотрите Ниже пример того, чего я пытаюсь достичь

По сути, я создал динамическую таблицу в проекте angular, которая содержит массив объектов, и я использую первую запись для предоставления заголовков для таблицы, но я хочу упорядочить эти заголовки и последующие данные в таблице, используя массив строк для определения порядка.

В настоящее время я получаю таблицу с заголовками «имя», «идентификатор», «дата»

Однако мои данные отображаются в алфавитном порядке в соответствии со свойствами, т.Е. «дата», «идентификатор», «имя»

Любые предложения по подходу, который я мог бы использовать здесь — спасибо, ребята

https://stackblitz.com/edit/angular-ivy-bzpbcb?file=src/app/app.component.ts

Я думаю, вы уже сделали или знаете решение. Данные находятся в табличных данных. Также есть другой массив ключей, который будет указывать порядок заголовков. И, как вы делали в первом цикле ngFor, выполните итерацию по массиву заголовка, чтобы отобразить заголовок .. и 2-й цикл ngFor для отображения там данных.

Это может быть расширено дальше. Создайте компонент сетки, который будет принимать входной параметр. Допустим, gridModel и он будет иметь два свойства, как показано ниже:

 gridModel = {
  'header': ['name', 'id', 'date'],
  'gridData': [
      { 'id': '4640516b', 'date': '2020-10-15', 'name': 'Test 2' },
      { 'id': '4640516b', 'date': '2020-10-15', 'name': 'Test 2' }
   ]
}

<my-grid (model)="gridModel"></my-grid>
  

Эту модель можно расширить, указав для каждого столбца их тип данных или если они сортируются или нет и т.д. Таким образом, ваша сетка станет компонентом, который можно использовать повторно, и вы сможете продолжать расширять функциональность сетки и предоставлять потребителям входную модель сетки. Более того, если сетка отображает какое-либо событие, вы тоже можете это сделать, например, щелкнуть по данным в сетке (гиперссылка) и т. Д.

Также возможно, что вы принимаете только заголовок в качестве входных данных для сетки, чтобы отобразить его и передать данные позже в grid (которые поступят через вызов ajax). Что-то вроде:

  <my-grid (model)="gridModel" (data)="tableData"></my-grid>

 //after ajax api call, you can do:
 this.tableData = response.data;
  

В вашем stackblitz цикл ngFor для отображения данных будет выглядеть следующим образом:

 <tr *ngFor="let tableRow of gridModel.gridData; let i = index">
  <td *ngFor = "let column of gridModel.header">
   {{tableRow[column]}}
  </td> 
</tr>
  

https://stackblitz.com/edit/angular-ivy-v5ga1q