エラー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、5.0.0 AngularFire2。

私が下のコードを実行すると、すべてが期待どおりに機能しますが、私は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と1の中のすべてのデータフィールドを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; 
     } 
     }) 
    })