오류 TypeError : 정의되지 않은 '읽지 않음'속성을 읽을 수 없습니다.

Question

페이지가 처음로드 될 때 아래 오류가 계속 표시되지만 끝내기 만하면 모든 것이 예상대로 계속 작동합니다. 나는 현재 각도 4.4.3을 사용하고

ERROR TypeError: Cannot read property 'unread' 
of undefined 
at listing-element.ts:34 
at Array.forEach (<anonymous>) 
at SafeSubscriber._next (listing-element.ts:33) 
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238) 
at SafeSubscriber.next (Subscriber.js:185) 
at Subscriber._next (Subscriber.js:125) 
at Subscriber.next (Subscriber.js:89) 
at MapSubscriber._next (map.js:83) 
at MapSubscriber.Subscriber.next (Subscriber.js:89) 
at MapSubscriber._next (map.js:83) 

, 이온 - 각도 3.9.2, AngularFire2 5.0.0.

아래의 코드를 실행하면 모든 것이 예상대로 작동하지만 불행한 코드가 들어있는 if 문이 얼마나 많은지에 관계없이 초기화시 나타나는 Cannot read property 'unread' 오류를 제거 할 수 없습니다. Schrodinger 's Observable이 있습니다. 나는 내가 기대하고있는 데이터를 동시에 얻고 있지만, 아직 정의되지 않은 상태로 돌아오고있다. Observables의 비동기 특성으로 인해 실현 된 것이지만 팀이 Google Firestore로 데이터베이스를 전환 할 때까지 아무런 문제가 없었기 때문에 AngularFire 2를 업그레이드해야했습니다.

우리 파이프와 비슷한 문제가 있습니다. 및 HTML. HTML의 경우 대개 <div *ngIf="thread"> 내에 코드를 래핑하므로 목록 데이터를 얻은 후에 만 ​​표시됩니다. 그러나 if (threads.length > 0 && threads)과 같은 형식으로 TypeScript를 래핑하면 데이터가 예상 결과와 함께 로그에 기록되므로 아무 작업도 수행하지 않습니다.

//listing-element.ts 
    this.userId = this.auth.getUser().uid; 
    this.listingProvider.checkUnreadThreads(this.listing.id).subscribe(threads => { 
      threads.forEach(thread => { 
      if (thread[this.userId].unread) { // <-Line 34 is here 
       this.unread = true; 
      } 
      }) 
     }) 

    //listing-provider 
     checkUnreadThreads(listingId) { 
     return this.afs.collection(`listings/${listingId}/threads`) 
      .snapshotChanges() 
      .map(actions => { 
      return actions.map(action => { 
       const id = action.payload.doc.id; 
       const data = action.payload.doc.data(); 
       return { id, ...data } 
      }); 
      }) 
     } 

    //listing-element.html 
    <notification-badge *ngIf="userId === listingUserId && page.activity === true && unread"></notification-badge> 

이 내가 생각했던 모든 정보가 관련했다, 그러나 사람이 더 많은 정보를 필요로하는 경우, 나는 무엇이든 내가 할 수있는 제공하기 위해보다 더 행복 해요.

Answer 1

스레드되지 않은 속성에 액세스하기 전에 스레드가 있는지 확인하십시오. 여전히 ID와 하나의 모든 데이터 필드를 CONCAT 것이다 문제

if (thread[this.userId] && thread[this.userId].unread) { 
       this.unread = true; 
      } 

Answer 2

다음과 같이 시도 할 수 있습니다.

this.afAuth.authState.subscribe(
     (auth) => { 
     if (auth != null) { 
      this.listingProvider.checkUnreadThreads(this.listing.id).subscribe(threads 
       => { 
       threads.forEach(thread => { 
       if (thread[auth.uid].unread) { // <-Line 34 is here 
        this.unread = true; 
       } 
       }) 
      }) 
      }) 
     } 
     }); 

Answer 3

return { id, ...data }에 직면 있으면 알려 주시기 바랍니다. 예 자체가 작동하지 않았다 동안

지금이

id:...., 
unread:...., 
fieldx:...., 
fieldy:..... etc 

처럼 thread 모습이 코드를

this.userId = this.auth.getUser().uid; 
this.listingProvider.checkUnreadThreads(this.listing.id).subscribe(threads => { 
     threads.forEach(thread => { 
     if (thread.id == this.userId && thread.unread) { 
      this.unread = true; 
     } 
     }) 
    })