json - Angular 4 で null を破棄するとは

Question

ページをロードすると、「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 からデータを取得するノード 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 コード

角度ビューでデータをレンダリングするためにWebサービスを呼び出しているAngular JS home.component.ts

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>

End Template JSON DATA WHICH COMING FROM API
{ "data": [ { "title":"test title", "description":"test description" } ], "totalRecords":2 }

エラーのスクリーンショットを添付しました。

json - Angular 4 で null を破棄するとは

1 に答える 1

Related

Reference