0

加载页面时，我得到“什么是 null 的处置”。我要获取数据列表，但无法在视图中显示这些记录。在这里我添加了代码片段以了解我的要求

Angular JS 服务文件

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class PostsService {
 data: any = null;
 totalDocs: number;
 url: any = 'http://localhost:3000/services/';
 constructor(private _http: Http) { }

 public getPosts() {
  return this._http.get(this.url + 'posts')
              .map((res: Response) => res.json());
 }    
}

//End Angular JS Web service*

从 MongoDB 获取数据的 Node JS 代码

import { default as Category} from "../models/Category";
import { default as Post} from "../models/Post";
import { Request, Response, NextFunction } from "express";


export let getPostsAPI = (req: Request, res: Response, next: NextFunction) => {
const post: any = req.body;
const cond: any = {};
if (!this.empty(post.kword)) {

 *//$text is full text index*

  cond.$text = {$search : post.kword};
}
if (!this.empty(post.location)) {
  cond.city = {$regex: new RegExp("^" + post.location, "i") };
}

*Counting total number of records and 
Here Post is reference of collection, its working fine and generating data as i given bottom of this post.*
Post.count(cond).then(totalDocs => {
  Post.find(cond).sort({created_at: -1}).then(result => {
    const results = {data: result, totalDocs: totalDocs};
    console.log(results);
    res.end("" + JSON.stringify(results));
  });
 });  
};

结束节点JS代码

Angular JS home.component.ts 我在其中调用 web 服务以在角度视图中呈现数据

export class HomeComponent implements OnInit {
  results: any = {};
  model: any = {};
  constructor(private posts: PostsService) {
    posts.getPosts().subscribe(res => {
    console.log(res.totalDocs); // Showing number of records in console.
    this.results = res.data; // this is throwing error. 
  *//Error is: TypeError: Cannot read property 'dispose' of null*
  });
 this.model.kword = '';
 this.model.location = '';
}
  ngOnInit() {
  }
}

模板代码

<div class="container">
  <app-filter [result]=value (clicked)="searchJob($event)"></app-filter>
  <!-- /.row -->
  <div class="row" >
    <div class="col-sm-10 my-10" *ngFor="let post of results | async">
      <div class="card">
          <div class="card-body">
              <h3 class="mt-1"><a [routerLink]="['/job', post.company, post.title, post._id]">{{ post.title }}</a></h3>
              <p class="mt-1" *ngIf="post.company"><span class="badge badge-primary">{{post.company}}</span></p>
              <p class="mt-1" *ngIf="post.salary_min">Salary up to: &#8377;{{post.salary_min}} - &#8377;{{post.salary_max}}</p>
              <p class="mt-1" *ngIf="post.city || post.state">Location: {{post.city}}, <span *ngIf="post.state">{{post.state}}</span></p>
              <p class="mt-1" *ngIf="post.description">{{post.description | slice:0:150}}[...]</p>
          </div>
      </div>
    </div>
  </div>
  <!-- /.row -->
</div>

来自 API { "data": [ { "title":"test title", "description":"test description" } ], "totalRecords":2 } 的结束模板JSON 数据

我附上了错误的截图。

控制台中显示的错误

4

1 回答 1

6

异步管道为您订阅了一个可观察对象，因此需要为其提供一个可观察对象，您正在为其提供可观察对象的结果值，这就是您看到此错误的原因。

改为这样做：

results: Observable<any>;
model: any = {};
constructor(private posts: PostsService) {
  this.results = posts.getPosts().map(res => res.data);
  this.model.kword = '';
  this.model.location = '';
}

现在您将“结果”值设置为实际的 observable，并让 async 处理订阅部分。

于 2017-12-04T16:16:18.140 回答