Angular: 来自 .subscribe() 内部的字符串 return 导致无限的 xhr 请求

Question

我正在尝试获取与会者 ID 以解析为联系人对象（通过 HTTP 服务器请求），然后将名字和姓氏映射到 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 => {

      }
    );
  }

我的联系人服务：

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

服务 return 是一个正确的对象，但 .subscribe（或其他东西）不会 return 正确的值，并进入对服务器的 xhr 请求的无限循环，有效地崩溃浏览器。我怀疑我的问题与 .subscribe.

中的 return 有关

有什么建议吗？

更新 - 这是我的新 .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;
  }

那么我的观点就和以前一样了。

Answer 1

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

这就是您的方法使用它的方式 HTML 的写法

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

但是，我假设您愿意使用您的订阅回复。为了使用响应，您需要在控制器中使用属性，因为您的订阅响应是异步的

 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 是某处的常量值或以某种方式初始化。

Answer 2

您必须在事件上或 Angular 生命周期中调用 getContactFromId() 然后设置值，因为 Angular 定期调用组件的更改检测，所以每次渲染时 UI 正在调用此函数。

Answer 3

由于您的服务方法直接从视图中获取，因此需要多次调用 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>

确保您在获得详细联系信息后立即致电该服务。

快乐编码:)

Angular: 来自 .subscribe() 内部的字符串 return 导致无限的 xhr 请求

Angular: string return from inside .subscribe() causes infinite xhr requests

subscribe

angular