angular - 使用 Angular 在 firebase 帖子中保留“喜欢”数据

Question

问题是：我有一个连接到 Firebase 的小应用程序。它是一个类似于 Facebook 的帖子应用程序。一切都很好，除了喜欢的持久性，我不知道该怎么做。我已经尝试了很多解决方案，相信我，但结果并不像我预期的那样

Post 组件的 HTML：

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form [formGroup]="postForm" (ngSubmit)="onSubmit()">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <mat-form-field class="full-width">
              <mat-label>Title</mat-label>
              <input formControlName="title" matInput />
            </mat-form-field>
          </div>
        </div>
        <div class="row">
          <div class="col md 12">
            <mat-form-field class="full-width">
              <mat-label>Body</mat-label>
              <textarea matInput
            cdkTextareaAutosize
            formControlName="body"
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"></textarea>
            </mat-form-field>
            <button color="accent" mat-raised-button type="submit">Post</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">

      <mat-list role="list" *ngFor="let post of posts">

        <mat-list-item role="listitem">{{post.title}}</mat-list-item>
        <mat-list-item role="listitem">{{post.body}}  <app-like (change)="receiver($event)"></app-like></mat-list-item>
        <mat-list-item role="listitem">{{post.userId}}</mat-list-item>
      </mat-list>


    </div>
  </div>
</div>

Post的TS：

constructor(private afAuth: AngularFireAuth, private fb: FormBuilder, private postService: PostService, private authService: AuthService) {
    this.afAuth.authState.subscribe(user => {
      if (user)
        this.userId = user.uid;
    });
  }

  ngOnInit() {
    this.postSubscription = this.postService.getAll().valueChanges().subscribe(post => {
      this.posts = post;
    })
    this.postService.getLike().valueChanges().subscribe(data=>{
      this.likes=data;
    })
    this.postForm = this.fb.group({
      title: ['', Validators.required],
      body: ['', Validators.required]
    });
  }
  get title() { return this.postForm.get('title') }
  get body() { return this.postForm.get('body') }

  onSubmit() {
    let post: Post = {
      title: this.title.value,
      body: this.body.value,
      userId: this.userId   }
    this.postService.createPost(post)
  }

  receiver(event) {
    this.received=event

  }

和类似 HTML 的组件：

<button color="accent" mat-raised-button (click)="increase()">Like</button>
<div>{{plus}}</div>

TS：

 plus: any;
  @Output() change = new EventEmitter()
  constructor(private postService: PostService) { }

  ngOnInit() {
    this.postService.getLike().valueChanges().subscribe(data=>{
      this.plus=data
    })
  }


  increase() {
    this.change.emit({
      likes: this.plus++
    });
    this.postService.createlike(this.plus)

  }

最后，服务：

  createPost(post) {
    return this.db.list('/posts').push(post)
  }

createlike(like){
  return this.db.list('/likes').push(like)
}
getLike(){
  return this.db.list('/likes')
}
  getAll(): AngularFireList<Post[]> {
    return this.db.list<Post[]>('/posts');
  }
}

如您所见，我什至为喜欢创建了一个单独的集合，但我猜这是错误的，输出很奇怪。我只想在帖子正文旁边点赞。有人可以给我一个提示吗？

标签： angularfirebase