一次又一次地检查布尔值答案

【问题标题】：check boolean value again and again一次又一次地检查布尔值
【发布时间】：2020-05-31 15:16:08
【问题描述】：

我正在尝试为我的卡片构建无限滚动。我在 data.service 中使用变量 reload 来检查是否需要加载更多数据，当页面结束时，这些数据将设置为 true。
变量设置为 true 由 app.component 完成
内容填充在 post.component
中完成 ```reload`` 存在于 data.service 中，它使用 http 服务从 php 服务器获取内容。
目前我正在使用 observable 并尝试重复访问重新加载状态，但它在 Init 上仅被订阅一次。

app.component.ts

import { Component,HostListener } from '@angular/core';
import * as M from 'materialize-css';
import {DataService} from './current/posts/post-card/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent
{

  title = 'cosmos';
  constructor(private scrollSet: DataService){}

  @HostListener('scroll', ['$event'])
  onScroll(event:any) 
  {
    if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight-100)
      {
        console.log("noww");
        this.scrollSet.setValue(true);
      }
  }
}

post.component.ts

import { Component, OnInit} from '@angular/core';
import {DataService} from './data.service';
import { DomSanitizer } from '@angular/platform-browser';
import {Title} from "@angular/platform-browser";

@Component({
  selector: 'app-post-card',
  templateUrl: './post-card.component.html',
  styleUrls: ['./post-card.component.css']
})
export class PostCardComponent implements OnInit {

  constructor(private data: DataService,public sanitizer: DomSanitizer,private titleService:Title) 
  { 
    this.titleService.setTitle("Current Feed | Cosmos");
  }

  received = 'none';

  posts: any = [];

  ngOnInit() 
  {
    this.data.getPostData().subscribe(data =>
      {
      this.posts.push(data);
      this.received='success';
      },
      error =>
      {
        this.received='error';
      });

    this.data.getValue().subscribe((value) => {
      this.data.getPostData().subscribe(data =>
      {
      this.posts.push(data);
      this.received='success';
      },
      error =>
      {
        this.received='error';
      });
    });
  }
}

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {BehaviorSubject, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private reload: BehaviorSubject<boolean>;
  constructor(private http: HttpClient) 
  { 
    this.reload = new BehaviorSubject<boolean>(false);
  }

  fetchGap=5; // use this to set number of results wanted per fetch
  fetchEnd:number= 0;


  setValue(newValue): void {
    this.reload.next(newValue);
  }
  getValue(): Observable<boolean> {
    return this.reload.asObservable();
  }
  getPostData(){
    this.fetchEnd+=this.fetchGap;
    return this.http.get('http://localhost:1234/Server/getPosts.php?fetchEnd='+this.fetchEnd+'&fetchGap='+this.fetchGap);
  }
}

【问题讨论】：

你现在每次向下滚动时都会在控制台中打印？
是的..它的印刷很好
尝试在 post 组件中的 getvalue.subscribe 中打印值？
也可以正常工作...我的实际问题是如何反复检查reload的值。目前订阅部分仅在Init上工作一次。

标签： javascript angular typescript observable

【解决方案1】：

问题是您在处理后没有将 reload 的值设置为 false。尝试检查 post.component.ts 内部。这是该代码的一部分，即要求重新加载的块。

post.component.ts 重新加载块

   this.data.getValue().subscribe((value) => {
      if(value){
        this.data.getPostData().subscribe(data =>
          {
            this.posts.push(data);
            this.received='success';
          },
          error =>
          {
            this.received='error';
          });
          this.data.setValue(false);
       }
   });

【讨论】：