Abrufen von Daten von HTTP bei Klick

Question

Ich lerne eckig (mit Winkel 5). Im Projekt muss ich Daten per HTTP abholen und beim Klick auf jedes Element muss ich die Details anzeigen.

Ich bin in der Lage, die Daten über HTTP und auch in der Lage, Details basierend auf angeklickt Element zu bekommen. Aber ich kann die Details nicht zeigen, oder anders weiß ich nicht, wie ich die Details zeigen kann.

Hier was ich versucht habe. ID, Titel, Name und Alter

allEntry = []; 
onClickData = []; 
getAllData = function() { 
     this.httpClient.get(this.resourceUrl) 
      .subscribe(
       (data: any[]) => { 
        this.allEntry = data; 
       } 
      ) 
    } 


    onClick(id: number) { 
     const myData = this.allEntry .find((element) => element.id === id) 
     console.log(myData) 
     this.onClickData = myData; 
    } 

Die templete

<div *ngFor ="let el of allEntry "> 
    <button (click)="onClick(el.id)">{{el.name}}</button> 

</div> 

<div *ngFor ="let e of onClickData"> 
    {{e.title}} 
{{e.age}} 
{{e.name}} 
</div> 

jeder Eintrag in allEntry enthält. Jetzt zeige ich die Details beim Klick auf einen Namen.

Vielen Dank im Voraus

Answer 1

ngFor funktioniert nur für Arrays. onClickData ist ein Objekt. So zeigen sie richtig sollten Sie

<div *ngIf="onClickData"> 
    {{onClickData.title}} 
    {{onClickData.age}} 
    {{onClickData.name}} 
</div> 

Beachten Sie die ngIf verwenden. Dies verhindert das Rendern des Div, bis onClickData existiert. Dies verhindert Fehler, wenn onClickData nicht definiert ist.

Alternativ können Sie die sichere Navigation verwenden opertor

<div> 
    {{onClickData?.title}} 
    {{onClickData?.age}} 
    {{onClickData?.name}} 
</div> 

---

Nebenbei bemerkt: Sie brauchen nicht die .find() in Ihrem onClick Event-Handler zu tun. Dieser Handler hat Zugriff auf das gesamte Element. Sie können also das gesamte Objekt einfach an Ihre Methode übergeben und speichern.

// component.html 
<div *ngFor ="let el of allEntry "> 
    <button (click)="onClick(el)">{{el.name}}</button> 
</div> 

// component.ts 
onClick(el){ 
    this.onClickData = el; 
}