angular - 为点击的元素显示多个加载指示器

Question

我有这个*ngFor

<div *ngFor="let notificacao of notificacoes; let i = index">
   {{notificacao.marketplace}}
   {{notificacao.data_entrada | date:'dd/MM/yyyy'}} 
   {{notificacao.data_entrada | date:'shortTime'}}
   <h6><strong>{{notificacao.mensagem}}</strong>
      <i *ngIf="loading && identificadorLoading == notificacao.identificador"></i>
      <svg *ngIf="identificadorLoading !== notificacao.identificador || !loading" (click)="testaLoadingExclusao(notificacao.identificador, i)">
      </svg>
   </h6>
</div>

我的函数 testaLoadingExclusao()

testaLoadingExclusao(identificador, index){
    this.loading = true;
    this.identificadorLoading = identificador
}

我怎样才能让 loading 显示在超过 1 个点击的元素中？

我现在拥有的:

Answer 1

与其只跟踪一个加载指示器，不如尝试使用这样的数组:

private identificadorLoading: string[] = [];

....

testaLoadingExclusao(identificador, index){
    this.loading = true;
    this.identificadorLoading.push(identificador);
}

在你的 html 中:

<div *ngFor="let notificacao of notificacoes; let i = index">
   {{notificacao.marketplace}}
   {{notificacao.data_entrada | date:'dd/MM/yyyy'}} 
   {{notificacao.data_entrada | date:'shortTime'}}
   <h6><strong>{{notificacao.mensagem}}</strong>
      <i *ngIf="loading && identificadorLoading.includes(notificacao.identificador)"></i>
      <svg *ngIf="!identificadorLoading.includes(notificacao.identificador) || !loading" (click)="testaLoadingExclusao(notificacao.identificador, i)">
  </svg>
   </h6>
</div>