Generate content dynamically with single observable

Question

I create a table dynamically (ngFor), as returned from a list retrieved from the database (via API).

The table displays item information and when the item has attachment(s), in the item row a command capable of getting to the server is created to bring the attachment list of that item.

This "behind the scenes" command is a Observable that waits for the return of the list of attachments to display on the screen.

My problem: for each item that has an attachment, when creating the HTML component associated with the Observable, I am creating several instances of that same Observable, if I call the command to bring the relation of attachments, all observables receive the retrieved information.

Here is a minimum code for example (business issues cannot display the source in full) (Edited: click on the link to see an example code)

<table>
<thead>
  <th>Id</th>
  <th>Item</th>
  <th>Anexo</th>
</thead>
<tbody *ngFor="let item of listItens">
  <tr>
    <td>{{ item.Id }}</td>
    <td>{{ item.Descricao }}</td>
    <td><a *ngIf="item.PossuiAnexo"/></td> //somente crio o comando se possui anexo
  </tr>
  <tr *ngIf="item.PossuiAnexo">Aqui tem um componente associado a um Observable que dá get no servidor e recupera a lista dos anexos se link for "clicado" </tr>
</tbody>
</table>

Print of requests. Each of them corresponds to the "observable" of each item that contains attachment. I need to recover the data only in the observable of the item whose command was triggered.

Answer 1

I don’t know if I understand this correctly, but it seems to me that there is a certain confusion of concepts. By clicking on "has attachment", the function onClickAnexo() should be responsible for fetching attachments only from that specific item. For this, it would be important to indicate which item was clicked:

<tbody  *ngFor="let iten of listItens; let i = index">
      <tr>
        <td>{{ iten.Id }}</td>
        <td>{{ iten.Desc }}</td>
        <td><a *ngIf="iten.Flag" 
              class="btn btn-primary"
              href="{{'#docTramite' + i}}" 
              id="{{ iten.Id }}"
              role="button" 
              aria-expanded="false"
              (click)="onClickAnexo($event)">Tem anexo</a></td>
      </tr>
        <tr>
          <td colspan="3">
            <div class="row" [hidden]="isHidden" 
              style="background: yellow;">
                <div class="collapse" id="{{'docTramite'+ i}}">
                  <div class="card card-body">
                    <span>Recupero a lista de anexos aqui </span>
                  </div>
                </div>
            </div>
          </td>
        </tr>
    </tbody>

And on the Commission:

  listAnexos = [];

  onClickAnexo(event) {
    console.log(event.target.id);
    //Faz a busca no backend, baseado no Id clicado
    //Armazena o resultado em listAnexos na posição do id
    this.listAnexos[event.target.id] = "resultado";
    console.log(this.isHidden);
  }

Finally, ensure that only the item that received the Annex will be:

<tr>
  <td colspan="3">
    <div class="row"
      style="background: yellow;" *ngIf="listAnexos[iten.Id]">
        <div id="{{'docTramite'+ i}}">
          <div class="card card-body">
            <span>Recupero a lista de anexos aqui </span>
          </div>
        </div>
    </div>
  </td>
</tr>

Here the link with the changes.