Diskuze: Angular 7 tabulka s dynamickým počtem sloupců
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.


Zobrazeno 7 zpráv z 7.
K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookie. Informace o tom, jak náš web používáte, sdílíme se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje mohou zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby.
Používáme nezbytné cookies pro fungování webu a s tvým souhlasem také analytické a marketingové cookies.
Zajišťují základní funkce, bezpečnost a služby, které sis vyžádal. Nelze je vypnout.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| ITnetwork | ITnetwork | Provoz webu, relace, přihlášení a uložení nastavení cookies. | PHPSESSID, auth_token, sid, itn_consent_impression, __Host-itn_consent | Relace až 1 rok |
| Google Tag Manager | Správa značek a načítání měřicích nástrojů webu. | Žádné | Neukládá se | |
| Google Fonts | Načítání typografie webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google Hosted Libraries | Načítání potřebných knihoven a stylů webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google reCAPTCHA | Ochrana formulářů a webu před zneužitím. | _GRECAPTCHA, rc::a, rc::b, rc::c, rc::f | Relace až 180 dní | |
| YouTube | Přehrávání vloženého video obsahu. | localStorage, IndexedDB; cookies after playback interaction | Relace až trvalé úložiště | |
| Vimeo | Vimeo | Přehrávání vloženého video obsahu. | __cf_bm, _cfuvid, vuid, localStorage, IndexedDB | Relace až 2 roky |
| Facebook Login | Meta | Přihlášení pomocí účtu třetí strany. | Úložiště řízené poskytovatelem | Relace až 1 rok |
| GoPay | GoPay | Zpracování uživatelem vyžádané platby. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
Pomáhají nám porozumět používání webu a zlepšovat ho.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Analytics 4 | Měření návštěvnosti a používání webu. | _ga, _ga_* | Až 2 roky | |
| Microsoft Clarity | Microsoft | Měření návštěvnosti a používání webu. | _clck, _clsk, _cltk | Relace až 1 rok |
Slouží k měření kampaní, personalizaci reklamy a marketingové komunikaci.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Ads | Měření kampaní, reklama a remarketing. | _gcl_au, _gcl_ls | Relace až 90 dní | |
| Meta Pixel | Meta | Měření kampaní, reklama a remarketing. | _fbp, _fbc, localStorage | Až 90 dní |
| Sklik | Seznam.cz | Měření kampaní, reklama a remarketing. | retargeting, sid, szn:* | Relace až trvalé úložiště |
| LinkedIn Insight | Měření kampaní, reklama a remarketing. | bcookie, li_gc, lidc, __cf_bm | Relace až 1 rok | |
| Ecomail | Ecomail.cz | Měření kampaní, reklama a remarketing. | ecmid, Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
| Atribuce kampaní ITnetwork | ITnetwork | Přiřazení návštěvy a objednávky ke kampani. | campaign_clid[*], user_session_context | Až 1 rok |
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.


Ahoj, v dokumentaci angular material je celkem pěkně vysvětlena
tabulka a jak s ní pracovat.
Pokud potřebuješ dynamicky měnit sloupce, tak nevidím problém s jejich
generováním.
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Toto hodíš do cyklu a budeš to projíždět přes všechny sloupečky, které ti přijdou -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
</table>
Asi bych hlavně potřeboval asi poradit jak udělat správně následující tabulku, jelikož sám nevím zda je tabulka vhodná nebo grid či něco jiného:
| Modul 1 | Modul 2 | Modul 3 | |
| Počet zakoupených licencí | 6 | 12 | 10 |
| Pobočka 1 | 5 | 2 | 3 |
| Pobočka 2 | 1 | 8 | 6 |
| Pobočka 3 | 0 | 2 | 1 |
Abych to vysvětlil tak počet modulů je dynamický, takže jich může být kolik chce, potom potřebuji někde zobrazit kolik licencí k danému modulu je zakoupeno ( zde je číslo, kolik licencí v daném modulu není nikde přiřazeno). Toto číslo spolu s modulem je needitovatelné, stejně jako názvy jednotlivých poboček. Co je editovatelné je počet licencí daného modulu na každou pobočku s tím, že by se mělo ještě dělat kontrola či odečítání ze zakoupených licencí na modul. Tam by mělo fungovat, že když přidám buď přes plus/minus nebo šipky nahoru/dolu, tak se dynamicky mění ty počty.
Nevíš ty nebo někdo jiný jak by se toto dalo vyřešit? Zatím jsem to nikdy nepotřeboval, tak nemám tušení jak udělat co si na mně vymysleli.
Moc děkuji za případnou radu jak se to má správně dělat s pomocí Angular 7/ material nebo s HTML a CSS jenom.
Jestli můžeš, pošli sem, jak vypadají data, která přijdou že serveru. Jestli je to nějaký JSON, tak ideálně jak vypadá. Pokud to půjde, tak zkusím něco vytvořit...
ahoj, můžu poslat jelikož tam ještě nic není, takže ukázka toho co může přijít je následující:
{
"corporate_accountno": "0011480873",
"moduleUsageDocumentDTOS": [
{
"licenceProposal": {
"uzivatel": "ZAKAZNIK",
"ulice": "ulice",
"misto": "mesto",
"rozsireni": null,
"icz": "",
"ico": "ico",
"expirace": null,
"produkt": "produkt",
"dbId": null,
"moduleLoadList": [
{
"module": "LAB",
"count": 23
},
{
"module": "NET",
"count": 141
},
{
"module": "BRL",
"count": 39
}
]
},
"tenantList": [
{
"tenant_no": "0011480873",
"nazev": "ZAKAZNIK",
"adresa": "adresa"
},
{
"tenant_no": "0011712976",
"nazev": "ZAKAZNIK.",
"adresa": "adresa"
},
{
"tenant_no": "0011713035",
"nazev": "ZAKAZNIK",
"adresa": "adresa"
},
{
"tenant_no": "0011819788",
"nazev": "ZAKAZNIK",
"adresa": "adresa"
}
],
"tenantModulesList": null,
"tenantModulesList": [
{
"tenant_no": "0011483264",
"moduleLoadList": [
{
"module": "BRL",
"count": 39
},
{
"module": "LAB",
"count": 23
},
{
"module": "NET",
"count": 141
}
]
},
{
"tenant_no": "0011483264",
"moduleLoadList": [
{
"module": "BRL",
"count": 39
},
{
"module": "LAB",
"count": 23
},
{
"module": "NET",
"count": 141
}
]
}
]
}
]
}
pasáž tenantModulesList tam bude samozřejmě jenom jednou. Když to otevřu poprvé, tak má hodnotu null a tabulka/grid/nebo něco jiného je prázdné bez vyplněných hodnot kromě toho počtu zakoupených licencí. Pokud otevírám již něco co jsem přes toto upravil, tak právě v tenantModulesList je pro jednotlivé pobočky/tenanty již roztříděnoa to by mělo být v jednotlivých sloupcí dle dodaných informací ze serveru.
Ještě dodám, že se to má správně i ukládat, tak to co tam uživatel
zadá, tak aby se dostalo do daného objektu, který by se dal potom uložit. To
uložení už není pro mně problém, ale to natažení do vizuálu bohužel
je.
Takže budu moc rád za případnou pomoc či radu.
Děkuji
Jasný, mám teď docela dost věcí na práci do školy, tak se na to zkusím podívat dnes odpoledne až přijdu...
Zobrazeno 7 zpráv z 7.