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
}

我怎样才能使加载显示在超过 1 个点击的元素中？

我现在拥有的：

标签： angulartypescript

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>