Sleva na školení Naučit se HTML & CSS, JS a Bootstrap
Získej 500 Kč na naše školení. Více zde
Probíhá výprodej HTML & CSS, JavaScript a Bootstrap

Diskuze: Angular 7 tabulka s dynamickým počtem sloupců

Aktivity (2)
Avatar
Ladislav Niderle:25. února 13:41

Ahoj, potřeboval bych poradit jak udělat v Angular 7 tabulku v materialu tak, že počet sloupců se může měnit. Mám dotaz na server a ten mi dá data, kde vím, že dostanu třeba info pro 5 slopců, ale příště jich může být klidně 12.

Zkusil jsem: Snažil jsem se dohledat jak pracovat s tabulkou table mat-table, kde bych byl schopen zpracovávat rozličný počet sloupců.

Chci docílit: Potřebuji zařídit, aby byl proměnný počet sloupců a pak se k těm datům i dostat, abych mohl na server vrátit informace pro uložení.

 
Odpovědět 25. února 13:41
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:25. února 21:52

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>
Nahoru Odpovědět 25. února 21:52
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:26. února 7:31

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.

 
Nahoru Odpovědět 26. února 7:31
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:26. února 9:07

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...

Nahoru Odpovědět 26. února 9:07
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Odpovídá na Petr Štechmüller
Ladislav Niderle:26. února 10:04

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

 
Nahoru Odpovědět 26. února 10:04
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovídá na Ladislav Niderle
Petr Štechmüller:26. února 10:17

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...

Nahoru Odpovědět 26. února 10:17
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
 
Nahoru Odpovědět 26. února 10:37
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.