在迭代期间通过角度2中的映射键检查表达式后发生了变化

Question

我不明白为什么我会收到错误.我的地图没有改变.

检查后表情发生了变化.上一个值:'[object Map Iterator]'.当前值:'[object Map Iterator]'

<tr *ngFor="let author of bindedAuthors.keys()">
  <td> {{author}}</td>
  <td>
    <button (click)="onUpdate(author)"
            class="btn gl-btn-primary">Update
    </button>
  </td>
  <td>
    <button (click)="onDelete(author)" class="btn gl-btn-default">Delete</button>
  </td>
</tr>

结果是预期的,所有数据都会显示,但每次都会出现这个错误.

Answer 1

不要绑定到...keys()模板中的方法.每次更改检测运行时都会调用它. object.keys()每次调用它时都会返回一个新对象,Angular会将其识别为意外更改,从而导致您的错误.

你可以解决它

someMethod() {
  this.bindedAuthorsKeys = this.bindedAuthors.keys();
}

*ngFor="let author of bindedAuthorsKeys"

Answer 2

我的地图是从Firestore自动同步的当前数据的主要来源。如果我按照 Günter 接受的答案中的建议进行操作，则必须确保此数组与我的地图保持同步。取而代之的是，我keyvalue直接将 Angular的内置管道与地图一起使用，如下所示：

<tr *ngFor="let author of bindedAuthors | keyvalue">
  <td> {{author.value}}</td>
  <td>
    <button (click)="onUpdate(author.value)"
            class="btn gl-btn-primary">Update
    </button>
  </td>
  <td>
    <button (click)="onDelete(author.value)" class="btn gl-btn-default">Delete</button>
  </td>
</tr>

有什么我不知道的注意事项吗？