<div class="_container mx-auto">
<div class="text-white text-xs">
<div *ngFor="let accessorie of accessories">
<app-cards [type]="accessorie.videocards" text="Видеокарты"></app-cards>
<app-cards [type]="accessorie.motherboards" text="Материнские платы"></app-cards>
<app-cards [type]="accessorie.processors" text="Процессоры"></app-cards>
<app-cards [type]="accessorie.memory" text="Оперативная память"></app-cards>
<app-cards [type]="accessorie.drives" text="SSD диски"></app-cards>
<app-cards [type]="accessorie.powerSupplies" text="Блоки питания"></app-cards>
<app-cards [type]="accessorie.processorCoolers" text="Кулеры для процессоров"></app-cards>
<app-cards [type]="accessorie.computerCases" text="Компьютерные корпуса"></app-cards>
<div class="text-red-500 p-3 text-2xl">
({{total}}р)
</div>
</div>
</div>
</div>
private templateTotal(key: any){
key.map((k: any) => {
if (k.show) {
this.sumTotal(k.price);
}
});
}
public ngOnInit(): void {
this.accessories.map((key: any) => {
this.templateTotal(key.videocards);
this.templateTotal(key.motherboards);
this.templateTotal(key.processors);
this.templateTotal(key.memory);
this.templateTotal(key.drives);
this.templateTotal(key.powerSupplies);
this.templateTotal(key.processorCoolers);
this.templateTotal(key.computerCases);
});
}
const css = document.createElement("style");
const thema = {
display: [
{
class: "block",
properties: "display: block;",
},
{
class: "inline-block",
properties: "display: inline-block;",
},
],
extend: {},
};
thema.display.map((k) => (css.innerText += `.${k.class} {${k.properties}}`));
document.head.appendChild(css);
((propertyValues) => {
propertyValues.forEach((propertyValue) => {
Array.prototype.forEach.call(
document.getElementsByClassName(propertyValue),
({ style }) => {
style.display = propertyValue;
}
);
});
})([
"block",
"inline-block",
"inline",
"flex",
"inline-flex",
"table",
"inline-table",
"table-caption",
]);
const frame = {
_propertyValue: "",
$: function (propertyValue) {
this._propertyValue = document.querySelectorAll(propertyValue);
return this;
},
css: function (property, propertyValue) {
switch (property) {
case "display":
this._propertyValue.forEach((property) =>
(property.style.display = propertyValue)
);
break;
}
},
};
frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");
frame.$(".inline").css("display", "inline");
frame.$(".flex").css("display", "flex");
<script src="https://cdn.tailwindcss.com"></script>
const frame = {
_propertyValue: "",
$: function (propertyValue) {
this._propertyValue = document.querySelectorAll(propertyValue);
return this;
},
css: function (property, propertyValue) {
switch (property) {
case "display":
this._propertyValue.forEach((property) =>
console.log((property.style.display = propertyValue))
);
break;
}
},
};
frame.$(".block").css("display", "block");
frame.$(".inline-block").css("display", "inline-block");