Array 中的元素已删除，Ion DOM 元素仍保留在屏幕上，重新渲染问题？答案

【问题标题】：Element from Array removed, Ion DOM element remains on screen, re rendering issue?Array 中的元素已删除，Ion DOM 元素仍保留在屏幕上，重新渲染问题？
【发布时间】：2019-04-26 17:25:36
【问题描述】：

大家好，我遇到的问题是，当我将一个项目添加到数组中时，离子芯片正在被正确渲染和添加。每当我单击芯片时，就会从数组中删除值，这很棒！但是，芯片仍保留在屏幕上。

好吧，我正在做的部分是一个搜索组件，搜索组件有一个高级搜索选项。从那里选择的所有选项都被发送到搜索服务，然后将值添加或删除到数组中，并且搜索组件具有一个 getter 函数，该函数从服务获取数组并将其添加到其自己的数组中，搜索组件的 html 文件来自该数组做一个*ngFor。我一直在阅读this 和this。虽然后者是最接近的，但我实际上并没有将任何东西传递给孩子。现在......您可能对自己说“嘿！！！这听起来像是您在重新发明轮子并且可以使用ngrx进行状态管理”在这种情况下您是正确的，但我无法使用它。我已经尝试过可观察的 IterableDiffers，但似乎无法让它从屏幕上移除离子芯片。

搜索html：

  <ion-chip color="primary" *ngFor="let item of advancedSearchesSelected; let i = index">
    <ion-icon name="close" color="danger" (click)="removeChipFromSearch(item); advancedSearchesSelected.slice(i, 1)"></ion-icon>
      <ion-label> {{item}} </ion-label>
  </ion-chip>

搜索.ts

advancedSearchesSelected: Array<string> = [];

constructor( public searchService: SearchService ){}

  ngOnInit () {
    this.advancedSearchesSelected = this.searchService.getSelectedValues();
  }

 removeChipFromSearch(chipToClear: string) {
    this.searchService.updateSearchInfo('remove', chipToClear);
 }

搜索 service.ts

selectedValues: string[] = [];


  public updateSearchInfo = (action: string, item: string) => {
    console.log('UPDATE SEARCH INFO -->', action, item);
    action === 'add' ? 
    this.selectedValues.push(item) : 
    this.clearSingleValue(item);
  };

  private clearSingleValue(item: string) {
    this.selectedValues = this.selectedValues.filter(val => val !== item);
  };

添加和删除正常，但 DOM 元素仍然存在。

【问题讨论】：

标签： angular ionic4

【解决方案1】：

您需要参与更改检测，以便视图知道数据已更新。如前所述，有一些方法可以做到这一点。我会选择手动运行detectChanges();

一定要导入。

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

控制器

constructor(private ref: ChangeDetectorRef) {}

public removeChipFromSearch(chipToClear: string): void 
{
    this.searchService.updateSearchInfo('remove', chipToClear);
    this.ref.detectChanges(); // for change detection.
}

【讨论】：

【解决方案2】：

[已解决] 感谢您的帮助@SeverinKlug，但是，这不是解决问题的解决方案。虽然这确实改变了引用，但问题是引用正在其他地方更改，而不是同一个文件，并且搜索组件没有收到来自搜索服务的更改通知，需要使用行为主题进行补救并找到解决方案@ 987654321@

这就是我更改代码的方式：

搜索.html：

  <ion-chip color="primary" *ngFor="let item of advancedSearchesSelected">
    <ion-icon name="close" color="danger" (click)="removeChipFromSearch(item)"></ion-icon>
      <ion-label> {{item}} </ion-label>
  </ion-chip>

搜索.ts

  ngOnInit () {
    this.searchService
    .getSelectedValues()
    .subscribe(item => {
      this.advancedSearchesSelected = item;
    });
  }

search.service.ts

export class SearchService {
  constructor() {}
  private selectedValues: string[] = new Array<string>();
  private selectedValues$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>(this.selectedValues);


  public getSelectedValues() {
    return this.selectedValues$;
  };

  public updateSearchInfo = (action: string, item: string) => {
    if (action === 'add') {
      this.selectedValues.push(item);
      this.selectedValues$.next(this.selectedValues);
    } else this.clearSingleValue(item);
  };

  private clearSingleValue(item: string) {
    this.selectedValues = this.selectedValues.filter(val => val !== item);
    this.selectedValues$.next(this.selectedValues);
  };

【讨论】：

【解决方案3】：

您没有更改 ArrayObjects 引用。更改检测和因此 DOM 更新仅在引用更改时触发。您可以重新分配数组引用自身的副本。

https://stackoverflow.com/a/20547803/7329611

arr2 = [...arr1];

【讨论】：