Question

我正在尝试实现一项功能，该功能将在右侧的列表中显示项目。该列表将根据用户选择进行填充。当用户从左侧的层次结构中选择一个项目时，该项目将添加到列表中。我想在右边显示这些项目。

slice.component.ts：

import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import * as API from '../../shared/api-routes';
import { BasestepComponent } from '../basestep-component/basestep.component';
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 extends BasestepComponent<string> implements OnInit {
  selections: string[] = [];
  newList: string[];

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

  ngOnInit() {

  }

  public onSliceChange(event:string):void {
    this.newList = [];
    this.selections.push(event);
    this.newList = this.selections;
    console.log(this.selections); //this has all the items selected
  }

}

slice.component.html：

  <fortune-select
 (sliceSelected)="onSliceChange($event)">
  </fortune-select>
  <rightside-component
      [sliceNodes]="newList">
  </rightside-component>

rightside.component.ts：

import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
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 implements OnInit {
  @Input() sliceNodes: string[];

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {

  }


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

}

rightside.component.html：

<ul class="selection-list">
    <li *ngFor="let item of sliceNodes">
      <button class="btn" >
        <i class="fa fa-close"> {{ item }} </i>
      </button> 
    </li>
</ul>

在右侧组件中，仅显示所选的第一项，因此显示在右侧。我可以看到，所有已选择的项目都存在于slice.component.ts中的“ this.newList”中

但是，整个列表没有转移到右侧组件。 sliceNodes仅获得第一项。我希望列表中的所有物品都可以转移。

我正在使用ChangeDetectionStrategy.OnPush，因此无法识别@Input中没有的更改。

该如何解决？任何帮助表示赞赏！

Answer 1

您可以将右侧组件的数据源转换为BehaviorSubject，然后使用异步管道在标记中使用它。我创建了一个原始的StackBlitz here。

组件：

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent  {
  list1 = ['item 1', 'item 2', 'item 3'];
  list2 = [];

  listSubject = new BehaviorSubject<string[]>([]);

  onItemClick(item: string){
  this.list2.push(item);
  this.listSubject.next(this.list2);
    }
}

单击列表中的项目时，该项目将添加到list2数组中。然后在listSubject上调用next（）方法以通知订阅者采取行动。

标记：

<label>Click item to select:</label>
<div style="border: 1px solid">
  <ul *ngFor="let item of list1" style="list-style: none;">
    <li (click)="onItemClick(item)">{{ item }}</li>
  </ul>
</div>
<label>Selected items:</label>
<div style="border: 1px solid">
  <ul *ngFor="let item of listSubject | async" style="list-style: none;">
    <li>{{ item }}</li>
  </ul>
</div>

标记正在使用“异步”管道来消耗列表主题，并且只要有新的更改就将更新。我认为这将使您朝正确的方向前进。

由于ChangeDetectionStrategy

1 个答案: