Таблица данных углового материала с динамическими строками

Я использую таблицу данных Angular 5 и Angular Material для построения данных. Я имею в виду пример на сайте ниже. В этой связи мне нужно включить динамические данные в каждую строку, как показано на скриншоте, где «избранное» - это заголовок столбца.

enter image description here

http://www.devglan.com/angular/angular-data-table-example

Пример Json для перекрестной ссылки.

constELEMENT_DATA: Element[
  
]=[
  {
    position: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: 'john@gmail.com'favoriteColor: 'red',
    favorite: {
      favoriteFood: [
        'Idly',
        'Vada'
      ],
      favoriteCar: 'Mercendes Benz',
      favoriteMovie: 'JamesBond movie',
      favoritePlace: 'HillStation'
    }
  },
  {
    position: 1,
    firstName: 'Mike',
    lastName: 'Hussey',
    email: 'mike@gmail.com',
    favorite: {
      favoriteFood: 'Dosa',
      favoriteMovie: 'RajiniKandth movie'
    }
  },
  {
    position: 1,
    firstName: 'Ricky',
    lastName: 'Hans',
    email: 'ricky@gmail.com',
    favorite: {
      favoriteFood: 'Chappathi',
      favoriteCar: 'BMW'
    }
  },
  {
    position: 1,
    firstName: 'Martin',
    lastName: 'Kos',
    email: 'martin@gmail.com'favorite: {
      
    }
  },
  {
    position: 1,
    firstName: 'Tom',
    lastName: 'Paisa',
    email: 'tom@gmail.com',
    favorite: {
      favoriteCar: 'Ford'
    }
  }
];

HTML:

<mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  <mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

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

Моя ошибка Я не смог правильно зафиксировать вывод на снимке экрана. Если вы рассматриваете имя John как первую строку, Food: Idly, Vada появятся в этой строке, но в следующей строке будет Car: Mercendes Benz, в следующей строке будет фильм о Джеймсе Бонде, а в следующей строке - HillStation. где, как и все остальные столбцы, принадлежащие этим строкам, будут пустыми. Следующая итерация начнется аналогичным образом для имени Рики. В Json все эти любимые элементы считаются избранными.

в чем ты сомневаешься?

Ferus7 11.04.2018 14:07

Я сомневаюсь, как отображать динамический (непоследовательный) любимый контент с помощью таблицы данных angular материала? Я предоставляю html выше.

Sundar 11.04.2018 14:11
2
2
13 977
1

Ответы 1

Просто используйте цикл в вашем HTML.

Stackblitz

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
      <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

В этом примере все строки имеют одинаковые элементы. Но если вы обратитесь к моему скриншоту выше, где есть любимый столбец с неравным количеством ячеек. И требование состоит в том, чтобы они были перечислены как отдельные строки, а другие столбцы оставлены пустыми. Не могли бы вы поделиться своими входными данными, переформатировав код в соответствии с примером? devglan.com/angular/angular-data-table-example

Sundar 11.04.2018 14:59

Элемент - это имя переменной строки. Если бы вы только открыли stackblitz, вы бы увидели, что он работает. У меня нет доступа к скриншотам (корпоративный прокси), но если вы хотите «неравное количество ячеек», просто дайте некоторым ячейкам опустеть.

user4676340 11.04.2018 15:02

Спасибо, проверю.

Sundar 11.04.2018 15:07

Не могли бы вы просмотреть переформатированный json и дать свой ответ сейчас.

Sundar 12.04.2018 06:38

Сгладьте ваши массивы.

user4676340 12.04.2018 07:45

Что, если мне нужен собственный заголовок столбца?

digish a d 02.01.2019 16:50

@digishad вы предоставляете его как HTML, а не только как текст.

user4676340 03.01.2019 09:11

Другие вопросы по теме