클릭시 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; 
    } 

allEntry의 각 항목은 ID, 제목, 이름과 나이를 포함

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

templete입니다. 이제는 이름 클릭에 대한 세부 정보를 표시해야합니다. 사전

Answer 1

ngFor에서

감사는 배열 작동합니다. onClickData은 개체입니다. 올바르게 표시하려면

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

ngIf에 유의하십시오. 이렇게하면 onClickData까지 div가 렌더링되지 않습니다. onClickData이 정의되지 않은 경우 오류를 방지합니다. 당신은 당신의 onClick 이벤트 처리기에서 .find()을 수행 할 필요가 없습니다 :

또는 당신 opertor

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

---

(!) 참고 안전 탐색 기능을 사용 할 수 있습니다. 그 핸들러는 전체 요소에 액세스 할 수 있습니다. 따라서 전체 객체를 메서드에 전달하고 저장할 수 있습니다.

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

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