MongoDB에서 데이터를 검색하면 "Null의 '이름'속성을 읽을 수 없습니다."오류가 발생합니다.

Question

일부 사용자 정보를 반환하고 HTML을 통해 표시하려고했습니다. 하지만 오류가 발생합니다 : "Cannot read property 'firstname'of null"오류 "데이터를 저장하려면 MongoDB, 백엔드 서비스 Express 및 Node.js 및 프런트 엔드 Angular를 사용하고 있습니다. 백엔드와 프런트 엔드 간의 통신을 위해 위임했습니다. 내 콘솔이 모든 데이터를 수신하기 때문에 Mongo와의 연결은 잘 작동하지만 프론트 엔드 측면에서는이 문제가 발생합니다.

MongoDB와의 연결을위한 routes-index.js 클래스 메서드

router.get('/tasks', async (req, res) => {
let MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
res.json([
    MongoClient.connect(url, function(err, db) {
        if (err) throw err;
        var dbo = db.db('angular-auth');
        dbo.collection('users').find({}).toArray(function(err, result) {
            if (err) throw err;
            console.log(result);
            //db.close;
         });
      })
   ])
 });

데이터를 프런트 엔드로 반환하기위한 tasks.service.ts 클래스 메서드

getTasks() {
return this.httpClient.get<any>(this.URL + '/tasks');
}

private-tasks.component.ts 데이터를 가져오고 구독한다고 가정하는 클래스 ngOnInit () 메서드

ngOnInit(): void {
this.tasksService.getTasks()
  .subscribe(
    res => {                             
      console.log(res);    //<===== this line is returning null value!
      this.tasks = res;                  
    },
    err => console.log(err)
  );
}

private-tasks.component.html 클래스

<ul class="list-group">
 <li class="list-group-item" *ngFor='let task of tasks'>
  {{task.firstname}}
 </li>
</ul>

console.log (res); null 값을 제공하지만 if / else 문 내에서 실제로는 null이 아닙니다 ... 어떻게 그것이 아닌지 확신합니다 ... coz 같은 방법이 콘솔에 출력을 제공하고 있습니다. 나는 또한 추가하려고 했습니까? 그런 식으로 {{task? .firstname}}에 오류가 발생하지 않지만 여전히 console.log (res); null 값을 제공합니다.

이 문제에 접근하는 방법을 제안 할 수있는 것이 있습니까?

Answer 1

범인은 res.json백엔드 측 의 호출입니다. 코드의 프런트 엔드 쪽이 좋아 보입니다. 함수 호출의 인수는 서버에서 클라이언트로 반환하는 객체 여야하지만 MongoClient.connect가 반환하는 것이 무엇이든간에 대신 제공하는 것입니다. 그래서 나는 확신 할 수 없다).

호출하는 곳 console.log은 가장 안쪽에있는 콜백 함수 안에 있습니다. 이 코드 조각이 실행되는 순간 데이터베이스가 응답하고 응답을 클라이언트로 보낼 준비가되었습니다. 그러나이 콜백이 실행 되기 전에 클라이언트로 데이터를 보내려고 합니다.

따라서 올바른 접근 방식은 res.json데이터를 사용할 수있을 때 실행되는 가장 안쪽 콜백 내부 에 배치 하는 것입니다.

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  var dbo = db.db('angular-auth');
  dbo.collection('users').find({}).toArray(function(err, result) {
    if (err) throw err;
    console.log(result);
    res.json(result); // <-- res.json goes inside, after data is available
  });
});

Answer 2

이것은 비동기 문제처럼 들리며 다음은 service.ts 파일에서 시도 할 수있는 작업입니다.

1. 데이터를 보관하려면 일종의 mongo 모델이 필요합니다. 예를 들면 :

 private tasks:TaskModel[] = []

1. 모델 외에도 rxjs에서 가져와야하는 주제를 갖고 싶을 것입니다.

import {Subject} from 'rxjs';

과

private taskUpdated = new Subject<taskModel>[](); //create a new subject of type taskModel that you will add to

1. service.ts 파일에서 업데이트 할 마지막 비트는 다음과 같습니다.

getTasks(){
   this.httpClient.get<any>(this.URL + '/tasks')
   .subscribe((taskData)=> {
       this.taskNotes = taskData;
       this.taskUpdated.next([...this.taskNotes])//adding in taskNotes
})

getTasksUpdatedAsListener(){
   return this.taskUpdated.asObservable();//observable that you will subscribe to in component.ts
}

1. 그런 다음 component.ts 파일에서 다른 구독 개체를 만들고 코드를 다음과 같이 변경합니다.

//subscription that needs to be created
private sub:Subscription;



ngOnInit(): void {
    this.tasksService.getTasks()//this needs to go first. It will get data in the service file

    this.sub = this.taskService.getTasksUpdatedAsListener()
        .subscribe((data TaskModel[])=> {
           console.log(data);//you should see the data come in as json
        })


}

어떻게되는지 알려주세요!