Question

我有两个数组文件，并且当前正在运行。假设文件位于索引0中，并且其进度位于索引1的currentlyRunning[1].progress内部我正在运行ngFor以显示所有文件。 td中的ngIf是否可以获取正确的进度，因为索引可能不同但文件ID是唯一的。

<tr *ngFor="let files of File; let index=i;">
  <td>
    {{file.name}}
  </td>
  <td>
    {{file.id}}
  </td>
  <td *ngIf="file.id === currentlyRunning[i].id">
    {{currentlyRunning.progress}}
  </td>
<tr>

Answer 1

您可以在组件类中创建一个函数，并在ngIf指令语句中使用它

Answer 2

我建议否则，您应该将数据相互映射...

const overwriteMerge = (destinationArray, sourceArray, options) => sourceArray;
this.oldusers = deepmerge(this.oldusers, this.users, {
   arrayMerge: overwriteMerge
});
console.log(this.oldusers.postLogin.redirect.options[0].url);
// this should output example.com but only outputs an empty string

然后您将在模板中使用简单的查询：

ngOnChages() {
  this.mapedData = currentlyRunning.reduce((map, file) => {
    map[file.id] = file;
    return map;
  }, {} as { [id: number]: iFile });
}

这样，它的复杂度仅为O（n），您有一种很好的方式来处理所有问题

Answer 3

不能保证您的代码显示所有当前的运行进度值。为此，您将必须运行嵌套循环以检查匹配的ID：

<tr *ngFor="let file of files;">
  <td>{{ file.name }}</td>
  <td>{{ file.id }}</td>
  <ng-container *ngFor="let curRunning of currentlyRunning">
    <td *ngIf="file.id === curRunning.id">
      {{ curRunning.progress }}
    </td>
  </ng-container>
<tr>

如果这些数组很大并且效率是一个问题（因为它将有一个运行时O（n ^ 2），则总循环迭代次数可能高达files.length * currentlyRunning.length），那么您应该重组您的数据，因此文件可以通过模板之外的某种方式直接映射到其进度。

（注意：：ng-container元素只是一个有角度的结构占位符，基本上是一个元素，您可以像* ngIf和* ngFor那样放置结构指令，而不必添加额外的内容元素）。

有没有一种方法可以搜索ng

3 个答案: