Angular 7 - Dynamisches Erstellen vom Button und Grids

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabula_Rasa

Mitglied
12 Mai 2017
181
2
18
Hallo,

ich bin mir nicht sicher, wie ich Folgendes realisieren soll:

Die API liefert beispielweise folgendes Array, in dem Objekte sind (JSON-Format):

Code:
[
{ "id": 2, "bezeichnung": "button1", "zeilen": 30, "spalten": 30, "position": 0, "farbe": "rot", "grid": 
[
 {"zeile":12, "spalte": 5, 
"bezeichnung": "inhalt125" 
},
{
"zeile": 3, "spalte":3, "bezeichnung":"inhalt33"
}
]
Mit den Daten soll ich ein Grid aufbauen, dass die vorgegeben Buttons automatisch generiert mit ihrer Bezeichnung und nach Position (0 - in der Reihe der erste Button) ordnet.

Jeder Button führt zu einem underschiedlichen Grid und Inhalte.

Im "grid" Array sind die jeweiligen Zellen, die an bestimmten Positionen des Grids mit ihren Inhalten zu füllen sind.

Im Prinzip dynamisches Erstellen eines Grid.

Meine Frage: Wie soll ich dieses Konzept realisieren? Mit einem Component und einer Schleife, die einmal alles durchgeht (da sind sehr viele solcher Objekte im Array), oder mehrerer Components?

Ich wüsste auch nicht, wie ich die Schleife aufbauen soll..
Hat jemand einen Vorschlag?
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.108
438
83
Berlin
Also pro Button ein Grid mit 30 x 30 = 900 Feldern. Wieviele Buttons gibt es denn, und sollen mehrere Grids gleichzeitig auf einer Seite gerendert werden? Das wäre ja ein übler Performance-Killer.

Verlinke doch mal ein reales JSON.

/edit: Button und Grid werden neben- / untereinander angeordnet, oder erzeugt / verlinkt der Button zum Grid?
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
181
2
18
Leider habe ich kein JSON und das war ein schlechtes Beispiel mit der Anzahl an Reihen und Spalten, aber wie du es sagtest, soll es gemacht werden.

Genau dasselbe dachte ich mir auch, dass die Performance echt darunter leidet...

Die Buttons sind frei erstellbar, aber es wird nicht mehr als 10 geben und 4 sind fest - bislang ist es so geplant.

Ob die Grids alle gleichzeitig gerendert werden oder je nach Button-Klick muss noch besprochen werden, aber denke, dass das Rendern aller Grids mit einem Api-Call echt viel wäre.

Der Durchschnitt an Feldern beträgt ca. 40 (5*8), es gibt aber auch Ausnahmen.

Wie wäre die beste Vorgehensweise?

EDIT: Button werden nebeneinander erzeugt, je nach dem welchen Button man klickt, wird das jeweilige Grid erzeugt, die Buttons sind sozusagen die Navigation, also sollte eigentlich verlinkt werden aber einige sind der Meinung, dass ein Component allein ausreicht und in diesem alles gemacht werden soll.
Also ich weiß wirklich nicht wie ich da rangehen soll
 
Zuletzt bearbeitet:

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.108
438
83
Berlin
2 Komponenten. Im Parent der Button und die eingebundene Child-Komponente, welche Zeilen, Spalten, Farbe und das grid: [] durchgereicht bekommt. In der Child-Komponente mit diesen Infos ein Grid-Array erstellen, den Inhalt der zu belegenden Felder an die entsprechenden Stellen setzen und das Array anschließend im Child-Template rendern.
 
Reactions: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
181
2
18
2 Komponenten. Im Parent der Button und die eingebundene Child-Komponente, welche Zeilen, Spalten, Farbe und das grid: [] durchgereicht bekommt. In der Child-Komponente mit diesen Infos ein Grid-Array erstellen, den Inhalt der zu belegenden Felder an die entsprechenden Stellen setzen und das Array anschließend im Child-Template rendern.
So hatte ich das auch, nur, dass ich fest die Button einprogrammiert habe und dementsprechend mehr als nur ein 2 Components hatte. Ich versuche es mal mit den 2 Components da nur so das dynamische Erzeugen von Buttons realisierbar ist. Danke!
 

Tabula_Rasa

Mitglied
12 Mai 2017
181
2
18
Hallo erneut,
ich hätte da noch eine Frage. Das Generieren der Button funktioniert einwandfrei. Jedoch weiß ich nicht genau, wie ich durch das Array loope.
Ich habe eine Klasse erstellt mit einem Adapter, um ein Objekt zu initialisieren (nach dem folgendem Beispiel: https://blog.florimond.dev/consuming-apis-in-angular-the-model-adapter-pattern). Angepasst an das obige JSON sieht sie so aus:

Code:
//adapter.ts
export interface Adapter<T>{
adapt(item: any): T;

//Grid.model.ts
import { Injectable } from '@angular/core';
import { Adapter } from './adapter';

export class Grid {

constructer(
 public id: number,
 public bezeichnung: string,
 public position: number
 public grid: ; // wie ist die Syntax hier und wie                                 //iteriere ich durch das Array
   ){}

}

@Injectable({
    providedIn: 'root'
})
export class GridAdapter implements Adapter<Grid> {

  adapt(item: any): Grid {
    return new Grid(
        item.id,
        item.bezeichnung,
        item.position,
        item.grid,
      );
  }
}

//grid.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridAdapter } from './grid.model';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class GridService {

  private baseUrl = 'http://api.myapp.com/grid';

  constructor(
    private http: HttpClient,
    private adapter: GridAdapter,
  ) { }

onGetGrid(): Observable<Grid[]> {
    return this.http.get(this.baseUrl).pipe(
      map((data: any[]) => data.map(item => this.adapter.adapt(item))),
    );
  }
}
Habe da einiges probiert, jedoch scheint wahrscheinlich die Syntax falsch zu sein. Wie müsste das aussehen im grid.model.ts?
 

Tabula_Rasa

Mitglied
12 Mai 2017
181
2
18
Ich danke dir. Ich habe da eine Idee und deinen Code zu sehen hilft mir persönlich weiter - ich lerne stets neues, z.B. was BehaviourSubject angeht und inwiefern es sich von Observable unterscheidet.

Auf jeden Fall tut es gut mal anderen Code zu sehen und damit auch neue Möglichkeiten etwas zu implementieren.
Ich versuche mal einen Teil deines Codes zu adaptieren bzw. damit etwas zu experimentieren und bin gespannt, was so dabei herauskommt :).
 
Werbung: