Angular FIrebase5オブジェクトのキーが表示されていません。削除できません

PakiPat

質問は回答済みですが、可能であれば、もっと簡単な質問を探しています。オブジェクトキーにアクセスするためだけに、1つではなく2つのマッピングを実装する必要があるのは奇妙に思えます。

基本的なFirebaseデータベース:ご覧のここに画像の説明を入力してくださいとおり、コースオブジェクトには明らかにキーがあります。マークアップ:

<ul>
  <li *ngFor="let course of courses$ | async">
    <b>Key:</b> {{course.$key}} <!-- doesn't show --!>
    <b>Title:</b> {{course.Title}}
    <b>Duration:</b> {{course.Duration}}
    <b>Author:</b> {{course.Author}}
    <p><button (click)="deleteCourse(course)">Remove</button></p>

    <hr> 
  </li>
</ul>

これで、コースは問題なく表示されますが、キーを削除するためにキーへの参照を取得する方法がわかりません。(または、firebaseDatabaseオブジェクトで適切なメソッドを使用していない可能性があります)。いずれにせよ、コンソールにキーを記録すると、未定義として表示されます。

export class AppComponent {
  courses;
  courses$: AngularFireList<any>;

  constructor(private db: AngularFireDatabase) {
    this.courses = db.list('/courses');
    this.courses$ = this.courses.valueChanges();
  }
  ...
  deleteCourse(course) {
    console.log(course.$key); // -> undefined
    this.db.object('/courses/' + course.$key).remove();
  }
}
Hareesh

更新された回答

Rxjsは、データのパイプ方法を変更しました。今、あなたはを使用する必要があります.pipe()

this.courses$ = this.courses.snapshotChanges().pipe(
  map(changes => 
    changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
  )
);

元の回答

.valueChanges()単にデータが含まれ、キーは含まれていません。あなたが使用する必要があります.snapshotChanges()

this.courses$ = this.courses.snapshotChanges().map(changes => {
  return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
});

今すぐ使用する {{course.key}}

これが修正されたコードです

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export class AppComponent {
  courseRef: AngularFireList<any>;
  courses$: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    this.courseRef = db.list('/courses');
    this.courses$ = this.courseRef.snapshotChanges().map(changes => {
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
    }));
   });
  }
  ...
  deleteCourse(course) {
    console.log(course.key);
    this.db.object('/courses/' + course.key).remove();
  }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Firebase / Angular:メッセージはHTMLで表示されませんが、メッセージオブジェクトが含まれています

分類Dev

Angular5はHTMLへのインターフェースオブジェクトを表示できません

分類Dev

Angularサービスの公開オブジェクトリテラルが更新されていませんか?

分類Dev

AngularのFirebaseからオブジェクトのキーを取得できません

分類Dev

Observableから返されたオブジェクトを入力コンポーネントAngular5として渡すことができません

分類Dev

Angular:「非アクティブ化」されたキーがある場合、配列のオブジェクトを表示しません

分類Dev

Angular:ng-repeatが正しく機能していませんが、オブジェクトはコンソールに表示されます

分類Dev

Angular $ scopeオブジェクトが割り当てられていません

分類Dev

「オブジェクト」にはそのようなメンバーが含まれていませんAngular5

分類Dev

Angular 6 / FirestoreオブジェクトデータはHTMLで表示されません

分類Dev

tsickle / closureを使用してangular5プロジェクトをコンパイルしようとすると、「goog.moduleの本体はこれを参照できません」というメッセージが表示されます。

分類Dev

Angular2のJSONデータ子オブジェクトからキー値を取得できません

分類Dev

サービスオブジェクトはAngular5のngModelにバインドできません

分類Dev

Angular2-jsonオブジェクトを表示できません

分類Dev

Typescript(Angular 8)でsubscribe()が呼び出されたときに返されたオブジェクトの値にアクセスできません

分類Dev

Angular 8:エラーエラー:キャッチされていません(約束されています):TypeError:ストリームが予期されていた場所に無効なオブジェクトを指定しました

分類Dev

FirebaseがAngular4プロジェクトのすべてのウェブページをホストしているわけではありません

分類Dev

Angular 2- * ngFor with keysパイプは、オブジェクトが変更されても更新されません

分類Dev

Angular2のonYouTubeIframeAPIReadyは、グローバルオブジェクトで定義されている場合でも、名前「YT」を見つけることができません

分類Dev

AngularはGMapオブジェクト内で更新されません

分類Dev

「「formControlAnimalSelect」のプロパティ「validator」に割り当てることができません:オブジェクトではありません」Angular Typescript

分類Dev

Angular 2配列はコンソールに印刷されますが、オブジェクトプロパティを画面に印刷できません

分類Dev

Angular4ネストされたオブジェクトはnull値エラーを読み取ることができません

分類Dev

Angular.js $ watch()がサービスのJSオブジェクトメンバーからの更新をキャッチしていません

分類Dev

オブジェクトの配列をローカルストレージに保存できません(Angular 9)

分類Dev

Angular8のPostAPICallでAuthorizationBearerトークンが送信されていません

分類Dev

Angularはオブジェクトを表示しません

分類Dev

Angularサービスでオブジェクトのプロパティに値を割り当てることができません

分類Dev

Angular 8getRoleはネストされたオブジェクトの関数ではありません

Related 関連記事

  1. 1

    Firebase / Angular:メッセージはHTMLで表示されませんが、メッセージオブジェクトが含まれています

  2. 2

    Angular5はHTMLへのインターフェースオブジェクトを表示できません

  3. 3

    Angularサービスの公開オブジェクトリテラルが更新されていませんか?

  4. 4

    AngularのFirebaseからオブジェクトのキーを取得できません

  5. 5

    Observableから返されたオブジェクトを入力コンポーネントAngular5として渡すことができません

  6. 6

    Angular:「非アクティブ化」されたキーがある場合、配列のオブジェクトを表示しません

  7. 7

    Angular:ng-repeatが正しく機能していませんが、オブジェクトはコンソールに表示されます

  8. 8

    Angular $ scopeオブジェクトが割り当てられていません

  9. 9

    「オブジェクト」にはそのようなメンバーが含まれていませんAngular5

  10. 10

    Angular 6 / FirestoreオブジェクトデータはHTMLで表示されません

  11. 11

    tsickle / closureを使用してangular5プロジェクトをコンパイルしようとすると、「goog.moduleの本体はこれを参照できません」というメッセージが表示されます。

  12. 12

    Angular2のJSONデータ子オブジェクトからキー値を取得できません

  13. 13

    サービスオブジェクトはAngular5のngModelにバインドできません

  14. 14

    Angular2-jsonオブジェクトを表示できません

  15. 15

    Typescript(Angular 8)でsubscribe()が呼び出されたときに返されたオブジェクトの値にアクセスできません

  16. 16

    Angular 8:エラーエラー:キャッチされていません(約束されています):TypeError:ストリームが予期されていた場所に無効なオブジェクトを指定しました

  17. 17

    FirebaseがAngular4プロジェクトのすべてのウェブページをホストしているわけではありません

  18. 18

    Angular 2- * ngFor with keysパイプは、オブジェクトが変更されても更新されません

  19. 19

    Angular2のonYouTubeIframeAPIReadyは、グローバルオブジェクトで定義されている場合でも、名前「YT」を見つけることができません

  20. 20

    AngularはGMapオブジェクト内で更新されません

  21. 21

    「「formControlAnimalSelect」のプロパティ「validator」に割り当てることができません:オブジェクトではありません」Angular Typescript

  22. 22

    Angular 2配列はコンソールに印刷されますが、オブジェクトプロパティを画面に印刷できません

  23. 23

    Angular4ネストされたオブジェクトはnull値エラーを読み取ることができません

  24. 24

    Angular.js $ watch()がサービスのJSオブジェクトメンバーからの更新をキャッチしていません

  25. 25

    オブジェクトの配列をローカルストレージに保存できません(Angular 9)

  26. 26

    Angular8のPostAPICallでAuthorizationBearerトークンが送信されていません

  27. 27

    Angularはオブジェクトを表示しません

  28. 28

    Angularサービスでオブジェクトのプロパティに値を割り当てることができません

  29. 29

    Angular 8getRoleはネストされたオブジェクトの関数ではありません

ホットタグ

アーカイブ