Angular 单击从HTTP获取数据

我正在学习angular（使用angular 5）。在项目中，我必须通过HTTP获取数据，单击每个元素时，我必须显示详细信息

我可以通过HTTP获取数据，也可以根据单击的元素获取详细信息。但是我不能展示细节，或者换句话说，我不知道如何展示细节

这是我试过的

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;
    }

圣殿骑士团

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

{{el.name}
{{e.title}}
{{e.age}}
{{e.name}}

allEntry中的每个条目都包含id、标题、姓名和年龄。现在显示我必须在单击名称时显示详细信息

---

提前感谢

ngFor

仅适用于阵列

onClickData

是一个对象。要正确显示它，您应该使用

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

---

旁注：您不需要在onClick事件处理程序中执行

.find（）

。该处理程序可以访问整个元素。因此，您可以简单地将整个对象传递给您的方法并存储它

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

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

//component.html
{{el.name}
//组件技术
onClick（el）{
此.onClickData=el；
}

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

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