角度：从.subscribe内部返回字符串会导致无限次xhr请求

问题描述

我正在尝试获取与会者ID（通过HTTP服务器请求）解析为Contact对象，然后将名字和姓氏映射到HTML div。

我的HTML：

            <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
              &bull; {{ getContactFromId( attendee ) }}
            </div>

我的.ts：

getContactFromId(_id: string) {

    this.contactService.getContactFromId(_id).subscribe(
      
      response => {
        return response.firstName + " " + response.lastName;
      },error => {

      }
    );
  }

我的contactService：

    getContactFromId(_id:string) {
        return this.http
            .get<Contact>('http://192.168.50.8:4000/api/contact/'+_id)
        
    }

该服务正确返回了一个对象，但是.subscribe（或其他）不会返回正确的值，并且进入到服务器的xhr请求的无限循环中，实际上导致浏览器崩溃。我怀疑我的问题与.subscribe内的退货有关。

有什么建议吗？

更新-这是我的新.ts代码：

    meetings: Meeting[] = [];
  attendees: Contact[] = [];

// constructor goes here

ngOnInit(): void {
    this.meetingService.allMeetingsDetailed.subscribe( meetings => { this.meetings = meetings; this.getAttendeesList() });
  }

  getAttendeesList() {

    if (this.meetings == null) return null; // SINCE THIS GETS CALLED ONINIT MEETINGS MIGHT STILL BE NULL SO I HAD TO PUT THIS IN... IS THERE A BETTER WAY?

    for (var i = 0; i < this.meetings.length; i++) {
      
      var attendees = this.meetings[i].attendees.split(',');

      for (var j = 0; j < attendees.length; j++) {

        this.contactService.getContactFromId(attendees[j]).pipe(take(1)).subscribe(
      
          response => {
            this.attendees.push(response);            
          },error => {
    
          }
        );  

      }
    }

  }

  getContactFromId(_id: string) {
    if (this.attendees.length == 0) return null; // SINCE THIS GETS CALLED BEFORE THE ATTENDEES VAR IS LOADED I HAVE TO PUT THIS IN... IS THERE A BETTER WAY?
    
    var attendee: Contact = this.attendees.find(contact => contact._id === _id);

    return attendee.firstName + " " + attendee.lastName;
  }

然后我的观点与以前保持一致并且起作用。

解决方法

由于您的服务方法直接从视图中获取，因此它被多次调用，因此调用了API。这会导致您的浏览器崩溃并挂起。

您要根据联系人ID获取与会者的联系方式，可以尝试以下操作

使API调用多个ID（ID列表）以获取其与会者姓名并将其存储在一个字段中，并在视图中使用该字段。

在模板中：

this.contactService.getContactFromId(_idList).subscribe(response => {
    this.attendeesList = response;
},error => {}
);

视图中：

 <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
          &bull; {{ attendeesList[attendee]}}
 </div>

确保获得联系方式后立即致电该服务。

重叠编码：）

您调用的getContactFromId方法不会返回任何内容。

这是您的方法使用HTML的样子

 getContactFromId(_id: string) {
          /* subscription*/
       return {"firstName":"demo","lastName":"something"};    
    }

但是，我认为您想使用您的订阅回复。为了使用响应，您需要在Controller中有一个属性，因为订阅响应是异步的

 person:any;

getContactFromId(_id: string) {
   this.contactService.getContactFromId(_id).subscribe(
          response => {
            this.person= response.firstName + " " + response.lastName;
          },error => {
          }
        ); 
....

您的HTML必须是这样的：

 <div *ngFor="let attendee of meeting.attendees.split(',')" style="font-size: 10px;">
              &bull; {{ persoon }}
            </div>

我会假设attendee是某个位置的常数或以某种方式初始化。

您必须在事件或Angular生命周期中调用getContactFromId（），然后设置该值，因为Angular会定期检测组件的更改检测，因此每次渲染UI时都会调用此函数。

angular subscribe