Неограниченные запросы запускаются при запросе данных в пределах l oop asyc

Question

Используя Angular с машинописным шрифтом, у меня есть следующий класс компонентов:

@Injectable()
@Component({
    selector: 'app-mycomponent',
    templateUrl: './mycomponent.component.html' 
})
export class MyComponent implements OnInit{
    public myList : any[] = [];
constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get("url").subscribe(result => {
      this.myList= result;
    }, error => console.log(error));
  }

  getSubitem(id){
    return this.http.get("url/"+id).subscribe(result => {
      return result;
    }, error => console.error(error));
  }
}

И после фрагмента html:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of myList">
      <td>{{item.id}}</td>
      <td>{{(getSubitem(item.id) | async)}}</td>
    </tr>
  </tbody>

Теперь запустим приложение и перейдем к в этом представлении myList загружается и отображается правильно. Но getSubitem запускается неограниченное количество раз, поэтому происходит сбой браузера.

Как я могу убедиться, что getSubitem вызывается только один раз для каждого MyList-элемента и отображается правильная информация?

Answer 1

Проблема в том, что он постоянно обновляет представление, снова и снова вызывая функцию getsubitem ().

Здесь может быть лучший подход к загрузке элементов asyn c:

Компонент:

@Injectable()
@Component({
    selector: 'app-mycomponent',
    templateUrl: './mycomponent.component.html' 
})
export class MyComponent implements OnInit{
    public myList : any[] = [];
    public subitems: Object = {};
constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get("url").subscribe(result => {
      this.myList= result;
      for(let item of this.myList){
        this.getSubitem(item.id);
      }
    }, error => console.log(error));
  }

  getSubitem(id){
    return this.http.get("url/"+id).subscribe(result => {
      this.subitems[id] = result;
    }, error => console.error(error));
  }
}

HTML:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of myList">
      <td>{{item.id}}</td>
      <ng-container *ngFor="let subitem of subitems[item.id]">
      <td>{{subitem}}</td>
      </ng-container>
    </tr>
  </tbody>

Дайте мне знать, если это работает для вас.