Question

我正在学习角度（使用角度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;
    }

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

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

提前致谢

Answer 1

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

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

注意ngIf。这可以防止div在onClickData存在之前呈现。这将防止在onClickData未定义时出现任何错误。

或者，您可以使用安全导航opertor

<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获取数据

1 个答案: