Question

我想要达到的目标- 表数据使用ngFor循环显示。每个表格行都有删除图标。如果用户单击删除图标，则应该在所有单击的图标上显示加载程序。我定义了一个数组clickedIndex = [];并将索引i存储在该数组中，因为它可以跟踪单击了哪个表行。我正在检查模板中哪个ngif显示i == clickedIndex [i]，然后显示加载程序，依此类推。如果我从第0个索引https://i.imgur.com/cgltuxY.png的顶部开始单击删除按钮，它将起作用如果我从https://i.imgur.com/8tcfiYG.png之间的任何地方单击删除图标，都将中断，您单击第二个索引，您看到的0旁边的2是由于{{clickedIndex [i]}}

<table id="customers">
        <tr>
            <th>Name</th>
          <th>Date</th>
          <th>Status</th>
          <th colspan="2">Action</th>
        </tr>
        <tr *ngFor="let file of uploadedFileHistory; let i=index;">
          <td>{{file.fileName}}</td>
          <td>{{file.createDateTime}}</td>
          <td>{{file.status}}</td>
          <td *ngIf="file.downloadToken; else notready;">
         ......
          </td>
          <ng-template #notready>
          <td>
        ......
          </td>
        </ng-template>
        <td>
          {{i}}
          {{clickedIndex[i]}}
          <div *ngIf="deleting && i==clickedIndex[i]" class="del-loader">loader is shown</div>
          <a *ngIf="deleting && i!=clickedIndex[i]" (click)="delFile(file.id, i)"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
          <a *ngIf="!deleting" (click)="delFile(file.id, i)"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
        </td>
        </tr>
      </table>

.ts文件

clickedIndex = [];
deleting: boolean;


 //When user clicks on delete icon
  delFile(id: any, index: any) {
    this.clickedIndex.push(index);
    alert(this.clickedIndex);
    alert(index);
    this.deleting = true;
    setTimeout(() => {
      this.deleting = false;
    }, 15000);
    // let fileId = {
    //   userFileId: id
    // }
    // this.auth.deleteUserFile(fileId).subscribe((res: any)=>{
    //   this.auth.getUserFiles().subscribe((res)=>{
    //     this.deleting = false;
    //     this.uploadedFileHistory = res;
    //     this.noRecords = this.uploadedFileHistory.length === 0 ? true : false;
    //   });
    // },(err: any)=>{
    //   this.deleting = false;
    //  });
  }

Answer 1

您正在测试错误的谓词。

您正在检查i是否与clickedIndex[i]处的值相同，这意味着数组中索引i处的值。

所以

i = 1;
clickedIndex = [1,2]

然后您正在检查1 === 2，因为clickedIndex[1] = 2。

您要做的是检查clickedIndex.includes(i)。

如果您的值在数组中，它将返回true。

Array.Includes

var i1 = 1;
var i2 = 2;
var clickedIndex = [];

clickedIndex.push(i1);
clickedIndex.push(i2);

var test = i1 == clickedIndex[i1]; // 1 == 2

console.log("i1:", i1);
console.log("Value at index i1:", clickedIndex[i1]);
console.log("predicate:", test);

console.log("With includes: ",clickedIndex.includes(i1))

在多个实例的表中单击时显示加载程序

1 个答案: