내 문제에 비동기 파이프와 직접 막대 차트를로드 할 수있는 것은이 stackoverflow post NGX-차트는 각

내가 중포 기지에서 데이터를 관찰하고 차트에서 보여 비동기 파이프를 사용하는 경우, 내가 볼 수있는 차트와 유사하다 콘솔에서 널 (null) 오류를 프롬프트합니다. 비동기 파이프가 없으면 모든 오류는 사라졌지만 데이터를 가져올 수 없습니다 (비동기 데이터 임). 도와주세요, 제발.

2017-12-15 phonemyatt

원인

구성 요소가 results에 대한 null 값으로 작동하지 않을 수 있기 때문에이 일어나고있다.

왜?

비동기 파이프는 구성 요소 코드를 구독하지 않으려는 경우 (또는 필요하지는 않지만) 대신 템플릿에서 사용합니다. 그러나 파이프는 순수한 함수입니다. 뭔가를 호출 할 때마다을 반환해야합니다.

서버에서 데이터가 도착하기 전에 비동기 파이프가 호출되면 파이프는 null을 반환하며 더 나은 값을 제공하지 않습니다.

는 오류 추적의 screeshot을 바탕으로, 그것은 results가 null로 설정되어있는 경우 작동하지 않습니다 ngx-charts-bar-vertical처럼 보이는 그 다음에 나옵니다.

A는 당신은 데이터가 존재하지 않는 상태에서 모든 막대 차트 구성 요소를 렌더링 할 필요가

를 해결. NgIf 지시문을 사용하면 as으로 템플릿에서 바인딩을 수행 할 수 있습니다. 템플릿의 일부를 조건부로 표시하려고하지만이 값을 다시 사용하려는 경우에 매우 유용합니다.

<ngx-charts-bar-vertical *ngIf="surveyAnswers | async as answers" 
         [results]="answers" 
></ngx-charts-bar-vertical>

surveryAnswers 관찰 나던 아무것도를 방출하는 동안 구성 요소가 rendred되지 않습니다, 따라서 오류가 없을 것입니다. 그것이 나올 때, async 파이프는 그것을 잡을 것이고, 방아쇠 CD는 더 이상 null이 아닐 것입니다 - 그것은 진실 값이 될 것입니다. 그러면 answers이라는 변수에 입력되어 results 구성 요소의 입력을 공급합니다 .

출처

2017-12-15 06:40:22

답변시 점입니다. 나중에 참조 할 수 있도록이 대답을 저장하십시오. 내가 관측 가능한 배열에서 배열로 변환하려고했는데 그것은 나를 더 혼란스럽게 만든다. 이 답변을 주셔서 대단히 감사합니다. – phonemyatt

동일한 문제가 있지만 여전히 같은 오류가 발생합니다. 나는 상점에서'ngrx'를 사용하여 데이터를 가져 왔습니다. 내 생성자에서 데이터를 선택하고 그것을 Observable '에 할당합니다. – AndreaM16

NGX-차트는 각

답변

원인

왜?

A는 당신은 데이터가 존재하지 않는 상태에서 모든 막대 차트 구성 요소를 렌더링 할 필요가

관련 문제