ищу помощи по правильному формированию списков характеристик товара, остановился на отображении в виде таблицы, однако имею неприятность с выравниванием. стиль использую Bootstrap'a -> Отображаю Angular'ом
в результате получаю как на скриншоте скриншот
Мб я вообще в корне, строю отображение не правильно?
таблицу строю так
<table class="table" *ngFor="let specification of details.specifications">
<thead class="thead-light">
<tr>
<th scope="col" colspan="2">{{specification.section}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let spec of specification.specifications">
<td>{{spec.name}}</td>
<td class="font-weight-bold text-success">
{{spec.value}}</td>
</tr>
</tbody>
</table>
модель данных для примера
{
"id": 1,
"name": "Материнская плата Gigabyte GA-Z270P-D3 Soc-1151 Intel Z270 4xDDR4 ATX AC`97 8ch(7.1) GbLAN RAID+HDMI",
"specifications": [
{
"section": "Поддержка дисков",
"specifications": [
{
"name": "Поддержка RAID 10",
"value": "Да",
"sorting": 25
},
{
"name": "Поддержка RAID 5",
"value": "Да",
"sorting": 24
},
{
"name": "Поддержка RAID 1",
"value": "Да",
"sorting": 23
},
{
"name": "Поддержка RAID 0",
"value": "Да",
"sorting": 22
},
{
"name": "Поддержка RAID",
"value": "ДА",
"sorting": 21
}
]
},
{
"section": "Память",
"specifications": [
{
"name": "Слотов памяти DDR4",
"value": "4",
"sorting": 18
},
{
"name": "Частотная спецификация памяти",
"value": "2400",
"sorting": 14
},
{
"name": "Поддержка частот оперативной памяти",
"value": "3866(O.C.) / 3800(O.C.) / 3733(O.C.) / 3666(O.C.) / 3600(O.C.) / 3466(O.C.) / 3400(O.C.) / 3333(O.C.) / 3300(O.C.) / 3200(O.C.) / 3000(O.C.) / 2800(O.C.) / 2666(O.C.) / 2400 / 2133 МГц",
"sorting": 13
},
{
"name": "Максимальный объем оперативной памяти",
"value": "64",
"sorting": 15
},
{
"name": "Режим работы оперативной памяти",
"value": "двухканальный",
"sorting": 16
},
{
"name": "Поддержка Intel Optane",
"value": "ДА",
"sorting": 1048
},
{
"name": "Тип поддерживаемой памяти",
"value": "DIMM",
"sorting": 12
}
]
},
{
"section": "Процессор",
"specifications": [
{
"name": "Northbridge",
"value": "Intel Z270",
"sorting": 6
}
]
},
{ ... и далее }
]
}
Добавьте col- * для td. Например так:
<tr *ngFor="let spec of specification.specifications">
<td class="col-4">{{spec.name}}</td>
<td class="font-weight-bold text-success col-8">
{{spec.value}}</td>
</tr>
Должно помочь
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
при выборе вариативного товара в woocommerce, надпись очистить неправильно отображается, плывет https://apphoneru/product/iphone-xs-max-512gb-zolotoj/ хотя вот на этом...
Приложение формирует эксель-файл и сохраняет файл в папке на сервереНеобходимо отобразить его в браузере (т