时间戳

首页 > 解决方案 > 角度列表参考未在项目删除时更新

javascript - 角度列表参考未在项目删除时更新

问题描述

我正在实现一项功能，该功能在右侧显示层次结构中的选定项目。

slice.component.ts ：

 import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
    import * as API from '../../shared/api-routes';
    import { DataService } from '../../shared/service/data.service';
    import { TreeNode } from '../../shared/dto/TreeNode';
    import { Subject } from 'rxjs/Subject';

    import html from './slice.component.html';
    import css from './slice.component.css';

    @Component({
      selector: 'slice-component',
      template: html,
      providers: [DataService],
      styles: [css],
      changeDetection: ChangeDetectionStrategy.OnPush
    })

    export class SliceComponent {
      selections: TreeNode<string>[] = [];
      newList: TreeNode<string>[];

      constructor(dataService:DataService, cd:ChangeDetectorRef) {
        super(dataService, cd);
      }

      public onSliceChange(event:TreeNode<string>):void {
        if(event.selected) {
          this.selections.push(event);
        }
        else {
          var index = this.selections.indexOf(event);
          if(index > -1) {
            this.selections.splice(index, 1);
          }
        }
        this.newList = this.selections.slice();
      }

    }

slice.component.html ：

<p>Slices</p>
<mat-input-container>
  <input #searchInput matInput placeholder="Search for Slices">
</mat-input-container>
<div class="flex-container">
<div class="SliceCheck" *ngIf="isDataLoaded">
  <fortune-select
     (sliceSelected)="onSliceChange($event)">
  </fortune-select>
</div>
<div class="sendToRight">
    <rightside-component
      [sliceTreeNode]="newList">
    </rightside-component>
</div>
</div>

rightside.component.ts ：

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TreeNode } from '../../shared/dto/TreeNode';

import html from './rightside.component.html';
import css from './rightside.component.css';

@Component({
  selector: 'rightside-component',
  template: html,
  providers: [DataService],
  styles: [css],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RightSideComponent {
  @Input() sliceTreeNode: TreeNode<string>[];

  constructor(private cd: ChangeDetectorRef) {}

  getSlices() : TreeNode<string>[] {
    if (typeof(this.sliceTreeNode) == "undefined" || (this.sliceTreeNode) === null) {
      return [];
    }
    return this.sliceTreeNode;
  }

  deselect(item: TreeNode<string>): void {
    if((item.children) !== null) {
      item.children.forEach(element => {
        this.deselect(element);
      });
    }
    var index = this.sliceTreeNode.indexOf(item);
    if(index > -1) {
      this.sliceTreeNode.splice(index, 1);
    }
    item.selected = false;
  }

}

rightside.component.html ：

  <ul class="selection-list" >
    <li *ngFor="let item of getSlices()">
      <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ul>

在我的实现中，一切都按预期工作，直到发生以下情况：

您从右侧列表中删除一个项目，它会从层次结构中正确取消选择。但是，当您再次从层次结构中选择它时，它现在会在侧视图列表中显示两次。

当再次选择之前取消选择的节点时，右侧组件中的列表实例不会更新。

关于如何解决这个问题的任何意见？它类似于我在网上找到的这个 plunkr：http ://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

标签： javascripthtmlangularlisttypescript

解决方案

最可能的问题是您在 SliceComponent 中使用ChangeDetectionStrategy.OnPush和执行突变onSliceChange，而没有显式调用cd.markForCheck().

changeDetection: ChangeDetectionStrategy.OnPush从 SliceComponent中删除或添加cd.markForCheck()到onSliceChange

当您将更改检测设置为 OnPush 时，Angular 仅保证在传递给它的 Inputs 的引用发生更改时更新组件。onSliceChange不会替换任何输入，因此不会更新切片组件。

您还应该考虑将 RightSideComponent 中的替换deselect为 Output 并处理 SliceComponent 中的更改。单向数据流的约定是只修改公共父节点中的公共状态。当两个组件都想修改某些共享状态时，这可以防止冲突。

推荐阅读