有没有办法在 Angular 中触发更改检测，以便在删除元素时更新视图中的数组？

Question

我有这个组件与客户属性。

import { Component } from '@angular/core';

@Component({
  selector: 'app-update-view',
  templateUrl: './update-view.component.html',
  styles: [
  ]
})
export class UpdateView {

  public client: string[] = ['client 1', 'client 2', 'client 3', 'client 4'];

  constructor() { }
   
  deleteClient() {
    this.client.pop();
  }

}

在html中我打印了这样的对象。

<div class="col md:col-6">
    <div>  
        <strong>Client</strong>
        <pre>{{ Client }}</pre>
    </div>
    <button (click)="deleteClient()">Delete Client</button>
</div>

我知道这不是打印数组的方法，我应该使用 'ngFor 并逐一打印项目，但我想知道是否有办法更新 html 中的数组删除客户端后，因为正确知道当我单击删除客户端时，html 中的数组保持不变。

出于好奇问这个问题，我知道这种打印数组的方式不正确，但我想知道是否有任何方法可以更新视图。

Answer 1

尝试使用 json 管道，并更改 <pre>{{ client | json }}</pre> 而不是 <pre>{{ Client }}</pre>。

<div class="col md:col-6">
  <div>
    <strong>Client</strong>
    <pre>{{ client  | json }}</pre>
  </div>
  <button (click)="deleteClient()">Delete Client</button>
</div>

Answer 2

您问题的直接答案是注入 ChangeDetectionRef 并调用 markForCheck。

export class UpdateView {

  public client: string[] = ['client 1', 'client 2', 'client 3', 'client 4'];

  constructor(private cdr: ChangeDetectionRef) { }

  deleteClient() {
    this.client.pop();
    this.cdr.markForCheck();
  }

}

但真正的答案是弄清楚为什么这不更新？您正在执行的编码类型称为“可变”编码。这就是人们在 AngularJS 中编写代码的方式。改变对象然后运行在这些对象上进行变化检测是 AngularJS 的变化检测周期如此缓慢的原因。 Angular 的变化检测的工作方式是，如果对对象（在本例中为数组）的引用是对不同对象的引用，则它仅对对象进行运行的变化检测。由于您正在调用 pop，您指向同一个数组，因此 Angular 不太可能运行 CD 在其上。

下面的代码会得到你想要的并触发 Angular 的 CD。以下代码将this.client更新为一个新数组，它会自动获取UI进行更新。

// THIS IS THE RIGHT ANSWER!!!
this.client = this.client.slice(0, -1);

通过这样做，您将依靠不可变编程，这使得更改检测更快、更便宜。

有没有办法在 Angular 中触发更改检测，以便在删除元素时更新视图中的数组？

Is there a way to trigger change detection in Angular to update an array in the view when an element is removed?

javascript

angular

angular-changedetection