角4可观察停止工作

时间:2017-11-28 08:14:48

标签: angular typescript rxjs observable material

我使用的是anuglar 4和棱角分明的材料。我创建了一个角度材料表。这需要一个Observable。所以我从列表中创建了一个Observable。它工作得很好,直到我开始删除一些组件。这些组件与我的表或Observable无关,但突然间它开始崩溃了。

现在我收到一个错误:

ERROR TypeError: this._subscribe is not a function

我不知道为什么会这样。我在使用它们的组件中导入Observable和.of函数,但它不起作用。我还有另一个具有完全相同的导入/版本的项目,并以完全相同的方式使用observable。但是这个项目非常合适。

我在哪里使用Observable:我订阅了一个http get响应,将一个列表转换为一个Observable.of()的Observable。

如果需要更多信息,请与我联系。

由于

编辑组件:

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/Observable"
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ProjectService } from '../services/project.service';
import { UserService } from '../services/user.service';
import { Subject } from 'rxjs/Subject';
import { DataSource } from '@angular/cdk/collections';
import { Injectable } from '@angular/core';
import { ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'bitbucket-project',
  templateUrl: './bitbucket-project.component.html',
  styleUrls: ['./bitbucket-project.component.css'],
styles: [ `
.deadProjectTable{
  background-color: #E3F2FD;
  overflow: auto;
  width: 100%;
  height: auto;
  max-height: 250px;
  float: top;
}

.projectHeader{
  color: #5C6BC0;
  font-size: 1.00em;
}

.deadProjectTitle {
  color: #3F51B5;
  font-size: 1.5em;
}
`
  ]
})
export class BitbucketProjectComponent implements OnInit {
  numberOfProjects:string;
  anonymousProjects:string[] = [];
  deadProjectNameList:string[] = [];
  deadProjectKeyList:string[] = [];
  deadProjectReasonList:string[] = [];
  projectDateValue: Date
  date: number
  month: number  
  year: number
  formattedDate: string

  dataSource = new ExampleDataSource(this);
  displayedColumns = ['key', 'name', 'reason'];

  constructor(private projectService: ProjectService, private `dataComponent:DatasComponent) {
let project = new Project('test', 'test', 'test');
this.deadProjectsList.push(project)}`
 ngOnInit() {
this.projectNumberRequest();
this.anonymousProjectRequest();


}

projectNumberRequest() {
this.projectService.getNumberOfProjects().subscribe((numberOfProjects) => {
  console.log(numberOfProjects['value']);
  this.numberOfProjects = numberOfProjects['value'];
 this.dataComponent.returnDataList().setProjectNumber(this.numberOfProjects);
}
 );


 }
anonymousProjectRequest() {
this.projectService.getAnonymousProjects().subscribe((anonymousProjects) => {
  console.log(anonymousProjects['list']);
  this.anonymousProjects = anonymousProjects['list'];
  this.dataComponent.setAnonymousProjectsList(this.anonymousProjects);
  if (this.anonymousProjects[0] == undefined) {

  } else {

  }
});


}
formatProjectDate() {
console.log("reaches that 2")
if (this.projectDateValue != null && this.projectDateValue != undefined) {
  this.date = this.projectDateValue.getDate();
  this.month = this.projectDateValue.getMonth() + 1;
  this.year = this.projectDateValue.getFullYear();
  this.formattedDate = this.year + "-" + this.month + "-" + this.date;
  return true;
} else {
  alert("Enter valid date");
  return false;
}


}deadProjectListRequest() {
this.formatProjectDate();
this.deadProjectsList = [];
this.projectService.getDeadProjectList(this.formattedDate).subscribe((deadProjectList) => {
  console.log('reached')
  console.log(deadProjectList['list']);
  this.deadProjectNameList = deadProjectList['list'];
  this.deadProjectKeyList = deadProjectList['seondList'];
  this.deadProjectReasonList = deadProjectList['thirdList'];
  console.log(this.deadProjectNameList.length);
  for (var _i = 0; _i < this.deadProjectNameList.length; _i++) {
    let project = new Project(this.deadProjectNameList[_i], this.deadProjectKeyList[_i], this.deadProjectReasonList[_i]);
    this.deadProjectsList.push(project)
  }
  this.dataSource = new ExampleDataSource(this);
  console.log(this.deadProjectsList[0]);
  console.log(this.deadProjectsList[1]);
});


 }
}
export class Project {

constructor(key: string, name: string, reason: string) {
      this.key = key;
      this.name = name;
      this.reason = reason;
    }
    key: string;
    name: string;
    reason: string;
  }

export class ExampleDataSource extends DataSource<any> {
    constructor(private projectComponent: BitbucketProjectComponent) {
      super();
      this.connect();
    }

    connect(): Observable<Project[]> {
      Observable.create(this.projectComponent.deadProjectsList)
      var tempo =  Observable.create(this.projectComponent.deadProjectsList);
      return tempo;

    }

    disconnect() {
    }
  }

编辑:项目服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { HttpHeaders, HttpRequest } from '@angular/common/http';



@Injectable()
export class ProjectService {

  constructor(public http: HttpClient) { }

  getNumberOfProjects() {
    return this.http.get('http://localhost:7990/bitbucket/rest/projects/1.0/projects/number', {
      headers: new HttpHeaders().append('Authorization', 'Basic YWRtaW46YWRtaW4=')
    });
  }

  getAnonymousProjects() {
    return this.http.get('http://localhost:7990/bitbucket/rest/projects/1.0/projects/anonymous', {
      headers: new HttpHeaders().append('Authorization', 'Basic YWRtaW46YWRtaW4=')
    });
  }

  getDeadProjects(datum: String) {
    console.log(datum);
    return this.http.get('http://localhost:7990/bitbucket/rest/projects/1.0/projects/dead/' + datum, {
      headers: new HttpHeaders().append('Authorization', 'Basic YWRtaW46YWRtaW4=')
    });
  }

  getDeadProjectList(datum: String){
    return this.http.get('http://localhost:7990/bitbucket/rest/projects/1.0/projects/dead/list/' + datum, {
      headers: new HttpHeaders().append('Authorization', 'Basic YWRtaW46YWRtaW4=')
    });
  }



}

1 个答案:

答案 0 :(得分:0)

在您的严格方法中尝试这样:

在服务中添加map()所有方法

getNumberOfProjects() {
    return this.http.get('http://localhost:7990/bitbucket/rest/projects/1.0/projects/number', {
        headers: new HttpHeaders().append('Authorization', 'Basic YWRtaW46YWRtaW4=')
    }).map(res => res.json());
}