無法使用可觀察值分配給服務局部變量

Question

摘要

我正在嘗試通過將JobService jobs:Job[]變量分配給請求的結果來將HTTP結果緩存到本地變量中。 然后，我希望過濾從另一個注入JobService組件調用setSearch()函數的JobService 。

當UserService檢索用戶時， JobService訂閱事件並獲取作業。 這意味着，如果用戶狀態更改，則Jobs數組也會更改。 然后調用setJobs()設置本地jobs變量

后來，當在搜索框中輸入一個用戶類型， setSearch()被調用， this.jobs是即使它是在設置空數組setJobs()

然后jobsPublisher將這組新的作業發布給訂閱者。

注意 ： HttpCacheService與Http非常相似，但是它只是將響應映射到所需的對象，同時處理和記錄錯誤。

JobService

@Injectable()
export class JobService {
    jobsPublisher: BehaviorSubject<Job[]>
    private jobs: Job[] = []

    constructor(
        private http: HttpCacheService<Job[]>,
        private userService: UserService,
        private searchService: SearchService
    ) {
        this.jobsPublisher = new BehaviorSubject<Job[]>(this.jobs)

        this.userService.userPublisher.subscribe((user: User) => {
            this.getJobs()
        })
    }

    private getJobs(): void {
        let req = this.http.GET("/d/jobs").subscribe(jobs => {
            this.setJobs(jobs) // jobs = Array(100)
            this.jobsPublisher.next(jobs)
            req.unsubscribe()
        })
    }

    private setJobs(jobs) {
        console.log("Setting jobs!")
        this.jobs = jobs // this.job = jobs = Array(100)
    }

    setSearch(query: string) { // this.jobs = []
        let newJobs = this.filterJobs(query, this.jobs)
        console.log(`Job Length Filter [${this.jobs.length}] -> [${newJobs.length}]`)
        this.jobsPublisher.next(newJobs)
    }

    private filterJobs(query: string, jobs: Job[]): Job[] {
         // Filter jbos
    }
}

JobListComponent

export class JobsListComponent implements OnInit {
  public jobrows: Array<Array<Job>> = []

  constructor(private jobService: JobService, private searchService: SearchService) { }

  ngOnInit() {
    this.jobService.jobsPublisher.subscribe((jobs: Job[]) => {
      this.genRows(jobs)
    })
  }

  private genRows(jobs: Array<Job>): void {
    this.jobrows = []
    while (jobs.length > 0) 
      this.jobrows.push(jobs.splice(0, 3))
  }

  search(event: any): void {
    this.jobService.setSearch(event.target.value || "")
  }
}

不工作

按預期工作

Answer 1

  private genRows(jobs: Array<Job>): void {
    jobs = jobs || []
    this.jobrows = []
    while (jobs.length > 0) 
      this.jobrows.push(jobs.splice(0, 3))
  }

是您要更改數組的罪魁禍首。

將其轉換為：

          this.jobrows.push(jobs.slice(0, 3))