Как отобразить объект данных массива в таблице html в Angular

avatar
Ranindu
1 июля 2021 в 16:35
289
1
0

Мне нужно отобразить ниже объект массива в таблице html, как это изображение. Мой массив данных такой.

data = [{id: 0 , name: 'one' , tags: ['a' , 'b' , 'c']} , {id: 1 , name: 'two', tags: ['r' , 't' , 'y']} , {id: 2 , name: 'three' , tags: ['a' , 'b' , 'c']} , {id: 3 , name: 'four' , tags: ['a' , 'b' , 'c']}]; .

enter image description here

Итак, я пробовал так, но это не работает так, как ожидалось на изображении.

 <table class="table table-hover table-bordered">
    <thead>
    <tr>
        <th scope="col">Tag Type</th>
        <th scope="col">Tags</th>
        <th scope="col">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let tag of data; let i = index">
        <td>{{ tag.id }}</td>
            <table class="table">
            <tr *ngFor="let el of tag.tags">
              <td>{{el}}</td>
            </tr>
            </table>
        <td>
            <div align="center">
              <a matTooltip="edit tag"><i>mode_edit</i></a>
            </div>
        </td>
    </tr>

    </tbody>
</table> 

это результат, который я получил. Есть идеи, как это сделать?

enter image description here

Источник
tmsbrndz
1 июля 2021 в 16:52
0

Может я чего не понимаю, но в чем проблема? Я не могу понять это из макета.

Ranindu
1 июля 2021 в 17:06
0

проверьте изображения. Мне нужно отображать строки строк a, b, c как в 1-м, так и в последнем столбцах.

tmsbrndz
1 июля 2021 в 18:19
0

Как выглядит ожидаемый результат с вашим примером набора данных?

Ranindu
2 июля 2021 в 11:16
0

1-е изображение. одинаковая высота строки

Ответы (1)

avatar
Shantanu Bharatia
3 июля 2021 в 11:55
1

Я внес несколько изменений в код. Вместо создания новой вложенной таблицы я попытался создать отдельные строки в основной таблице. Я скрыл TagType And Action, где он не должен отображаться на основе индекса. Для полосатого шаблона я добавил в таблицу класс table-striped.

Html-код будет выглядеть так

<table class="table table-hover table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">Tag Type</th>
      <th scope="col">Tags</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let tag of data; let i = index">
      <tr *ngFor="let el of tag.tags; let i2=index">

        <td *ngIf="i2==0"> {{tag.id}} </td>
        <td *ngIf="i2!=0"> </td>
        <td> {{el}} </td>
        <td>
          <div align="center">
            <a matTooltip="edit tag"><i>mode_edit</i></a>
          </div>
        </td>
      </tr>
    </ng-container>

  </tbody>
</table>

Рабочая демонстрация StackBlitz: https://stackblitz.com/edit/angular-ivy-aqmrzy

Ranindu
4 июля 2021 в 05:40
0

О, чувак, это работает. Спасибо большое!!