Generate content dynamically with single observable

Asked

Viewed 65 times

0

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.

inserir a descrição da imagem aqui

  • put your code

  • I had included a code here but disappeared. I will try to include again

  • I want to point out that there is no code error, it works. My problem is that when I create the <tr> that contains the component that will display the Observable output, all the items that are attached to it receive the result, not only in the item whose command was triggered.

  • 1

    I think if you posted your TS with the codes pertaining to the issue, it would be easier to understand.

  • 1

    I will try to create a Jsfiddler to better compose the question

1 answer

0


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.

  • Hello I will evaluate the suggestion! Thank you for collaborating!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.