单击时从 HTTP 获取数据

Question

我正在学习 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>

allEntry 中的每个条目都包含 id、title、name 和 age。现在显示我必须在单击名称时显示详细信息。

提前致谢

Answer 1

ngFor 仅适用于数组。 onClickData 是一个对象。要正确显示它，您应该使用

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

注意 ngIf。这会阻止 div 在 onClickData 存在之前呈现。当 onClickData 未定义时，这将防止任何错误。

或者您可以使用安全导航运算符

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

单击时从 HTTP 获取数据

Getting Data from HTTP on click

angular

angular5