Angular Liste mit Objekten anderem Component übergeben?
Hi GuteFrage Community,
ich bin jetzt auch mal auf dieser Plattform gelandet und hier kommt auch schon meine erste Frage. :)
Ich hoffe mir kann jemand weiterhelfen.
Ordnerstruktur:
- components
- autobahn
- autobahn.component.ts
- ...
- autofolder
- autofolder.component.ts
- ...
- app.component.ts
- app.component.html
- app.module.ts
- ...
- model
- interface
Ich habe eine Liste mit Autos in der autobahn.component.ts File erstellt, welche alle auf der Autobahn sind. Nun möchte ich auf der Oberfläche neben der Autobahn (autobahn.component.html) einen Container (autofolder.component.html) welcher alle Autos die auf der Autobahn sind auflistet.
Die Liste ist vorhanden, nun muss ich aber diese Liste dem autofolder.component.ts irgendwie übergeben.
autobahn.component.ts:
(vereinfacht dargestellt)
private autoList: any = [];
public setAutos() {
this.auto = new Auto();
this.autoList.push(this.auto);
}
Die autofolder.component.ts ist noch leer. :)
Kann mir jemand schon mit den gegebenen Infos helfen? Wenn ihr mehr Infos braucht, bitte einfach melden.
Vielen Dank und Grüße. :)
2 Antworten
Es gibt in Angular generell zwei Möglichkeiten Daten von Komponenten zu übertragen:
- Daten einer Kind-Komponente senden mit @Input-Decorator in der Kind-Komponente und Property-Binding
- Daten einer Eltern-Komponente senden mit @Output-Decorator und EventEmitter in der Kind-Komponente
So wie es sich für mich anhört möchtest du von Autobahn (parent) zum Autofolder (child) die Daten senden? Dann wäre es ersteres mit einem @Input-Decorator.
Siehe mehr dazu: https://angular.io/guide/inputs-outputs
Eventuell wäre es nützlicher die Autos in einem Service auszulagern, wenn es an mehreren Stellen benutzt wird und den dann in die Komponente zu injecten.
meine HTML sind in etwa so aus, also in app.component.html
<div>
<div class="row">
<div class="col-lg-2">
<app-autofolder></app-autofolder>
</div>
<div class="col-lg-10">
<app-autobahn ></app-autobahn>
</div>
</div>
</div>
Das sind genau nicht die beiden Arten, lol. Da diese Elemente quasi nichts miteinander zu tun haben, teilen sie sich einen globalen Zustand. Würde die Autos in einem Service auslagern der die beiden Komponenten füttert und im Service befindet sich dann der Zustand, der für beide gültig ist.
Alles klar, vielen Dank.
Evtl. kannst du mir bei meinem Service auch kurz helfen.
Ich habe bisher das:
transfer-list.service.ts
@Injectable({
providedIn: 'root'
})
export class TransferAutoListService {
private autos: any = [];
setAutos(auto: any) {
this.autos.push(auto);
}
getAutos() {
return this.autos;
}
}
autobahn.component.ts
this.transferAutoListeService.setAutos(this.auto);
autofolder.component.ts
export class AutofolderComponent implements OnInit {
public autos: any = [];
constructor(private transferAutoListService: TransferAutoListService) {
this.autos = transferListService.getAutos();
}
ngOnInit(): void {
console.log(this.autos);
}
}
in der autofolder.component.ts gibt der durch die console.log zwar die Liste mit den Autos darin aus, aber ...
.... das funktioniert nicht...
console.log(this.autos[0].name);
... obwohl meine Autos beim erstellen immer einen Namen erhalten.
Weiß nicht, liegt es vielleicht daran, dass autos: any ist, er den Typ also nicht deklariert ist? So ins Blaue geraten.
Ich würde noch ein Interface Auto anlegen, und dann das Array als Typ Auto machen, dann ist es auch typsicher.
Angular ist ein rotes Tuch für mich aber Du hast ja autobahn.component.ts im Ordner autobahn. Kann es sein, dass Du den Ordner auch angeben musst also vollqualifiziert? Leider wie gesagt komm ich aus einer anderen Schule und mach weniger Web. Keine Ahnung, nur mein 1. Verdacht, kann auch sein, dass ich total daneben liege und der Fehler ganz woanders ist, wie bei Software üblich.
Aber nach meiner Orderstruktur ist doch weder das eine noch das andere ein Parent oder Child, oder verstehe ich da was falsch.