Angular 棱角；解析…“的过程中HTTP失败”；错误

我一直在尝试部署一个MEAN应用程序，我使用了ng build命令，该应用程序的加载似乎很好，除了在我必须从数据库检索数据的地方（我使用mlab），它显示了以下错误：

消息：“解析/ticketList时Http失败”

这是我的密码：

票证列表.component.ts

import { Component, OnInit } from '@angular/core';
import{ UserService } from '../user.service';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-ticket-list',
  templateUrl: './ticket-list.component.html',
  styleUrls: ['./ticket-list.component.css']
})
export class TicketListComponent implements OnInit {
li:any;

  constructor(private test:UserService) { }

del(x){
  console.log(x);
  this.test.deleteTicket(x);
}

  ngOnInit() {
    this.test.getTicketList().subscribe(data=>{
      this.li = data;
    })
  }

}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { stringify } from '@angular/compiler/src/util';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http:HttpClient) { }

  getTicketList(){

   return this.http.get("tickets/ticketList", {responseType: 'text'});

    }
}

user.service.ts

import { Component, OnInit } from '@angular/core';
import{ UserService } from '../user.service';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-ticket-list',
  templateUrl: './ticket-list.component.html',
  styleUrls: ['./ticket-list.component.css']
})
export class TicketListComponent implements OnInit {
li:any;

  constructor(private test:UserService) { }

del(x){
  console.log(x);
  this.test.deleteTicket(x);
}

  ngOnInit() {
    this.test.getTicketList().subscribe(data=>{
      this.li = data;
    })
  }

}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { stringify } from '@angular/compiler/src/util';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http:HttpClient) { }

  getTicketList(){

   return this.http.get("tickets/ticketList", {responseType: 'text'});

    }
}

html文件

<div class="ticketList">
<table>
  <th>Event Name</th>
  <th>Title</th>

  <tr *ngFor="let d of li; let i = index">
    <td>{{d.eventName}}</td>
    <td>{{d.title}}</td>
    <td class="view"><a routerLink="/extendedList" routerlinkActive="active">view</a></td>
    <td class="delete"><a (click)="del(d.eventName)"> delete</a></td>

  </tr>
</table>
</div>

事件名称
标题
{{d.eventName}
{{d.title}}
看法
删除

试试这个：

getTicketList(){
  return this.http.get("tickets/ticketList", this.setHttpHeader());
}

setHttpHeader() {
  const headers = new HttpHeaders().set('Accept', 'application/json').set('Content-Type', 'application/json');
  let options = { headers: headers};
  return options;
}

---

不用说：使用HttpClientModule我们不需要在接收数据后解析数据；这将自动完成。

如果在get调用中未设置responseType，会发生什么情况？服务器的响应是什么？您的mongodb云服务似乎有问题。。只要从邮递员的get请求中打个电话，看看你是否得到了正确的答案response@rainerhahnekamp即使删除了响应类型，我也会收到相同的错误。@Shantanu我得到一个HTML文件作为响应，它似乎是根HTMLfile@geteds然后不是mlab服务提供REST服务的正确url（mlab上托管的数据库url）