クリック時にHTTPからデータを取得する

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

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、タイトル、名前と年齢が含まれています。今私は名前のクリックの詳細を表示する必要があることを示しています。事前に

おかげ

Answer 1

ngForのみのアレイのために動作します。 onClickDataはオブジェクトです。正しく表示するには

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

ngIfに注意してください。これにより、onClickDataが存在するまでdivが表示されなくなります。これにより、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; 
}