Question

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

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>

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

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

以某种方式，当再次选择先前已取消选择的节点时，右侧组件中的列表实例不会得到更新。

有关如何解决此问题的任何投入？这与我在网上找到的这个笨蛋类似：http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

Answer 1

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

从SliceComponent中删除changeDetection: ChangeDetectionStrategy.OnPush或在cd.markForCheck()的末尾添加onSliceChange

当您将更改检测设置为OnPush时，Angular仅保证当传递给其Inputs的引用更改时，组件将被更新。 onSliceChange不会替换任何Input，因此slice组件不会被更新。

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

角列表引用未在项目删除时更新

1 个答案: