我正在尝试实现一个功能,它将在右侧的列表中显示项目。根据用户选择填充列表。当用户从左侧的层次结构中选择一个项目时,它将被添加到列表中。我想在右边显示项目。
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中没有的更改。
我该如何解决?任何帮助表示赞赏!
您可以将右侧组件的数据源转换为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>
标记使用“异步”管道来使用列表主题,并在每次推送新更改时更新。我想这会让你朝着正确的方向前进。