在此文章有关NGRX 5 medium.com(2月13日),他们目前pipeable选择.这让我想起了rxjs中有关可管理选择器的内容,它们不仅可以通过'纯函数,兄弟'来证明,而且还可以通过函数的方式在不同的情况下声明和重用,而不必每次都使用map来调用letable功能.
所以我同意,这在rxjs中是一件好事,但为什么我们需要在ngrx中使用它 - 对于选择器.链接的文章显示以下示例:
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
interface AppState {
count: number;
}
@Component({
selector: 'my-app',
template: `
<button (click)="increment()">Increment</button>
<div>Current Count: {{ count$ | async }}</div>
<button (click)="decrement()">Decrement</button>
<button (click)="reset()">Reset Counter</button>
`
})
export class MyAppComponent {
count$: Observable<number>;
constructor(private store: Store<AppState>) {
this.count$ = store.pipe(select('count'));
}
}
所以我们现在打电话store.pipe(select(...));
而不是store.select(Selector);- 收益在哪里？为什么我应该更改我的代码以使用此行为或至少开始使用可管理选择器？
我有很多列表需要转换为地图，所以我决定创建一个listToMap函数：
export function listToMap<T>(
list: T[],
keyAccesFn: (listElement: T) => string): Map<string, T> {
const reducer = (accumulator: Map<string, T>, currentValue: T) => accumulator.set(keyAccesFn(currentValue), currentValue);
return list.reduce(reducer, new Map<string, T>());
};
该函数接受一个列表和一个返回列表元素字符串的函数。结果是一个 Map ，返回的字符串keyAccesFnas 是函数所使用的列表元素的键。
现在我不仅要提取列出的对象的 Maps 键，还要提取值本身。我决定通过将另一个函数传递到可能返回新类型的 listToMap 函数来解决这个问题。该函数看起来像这样的 atm：
export function listToMap2<T1, T2>(
list: T1[],
keyAccesFn: (element: T1) => string,
valueAccesFn: (element: T1) => T2 = (element: T1) => element): Map<string, T2> {
const reducer = (accumulator: Map<string, T2>, currentValue: T1) => …我正在使用NGRX和UI的Angular材质组件开发Angular应用程序。
一个组件使用手风琴折叠式显示扩展面板列表。这些扩展面板包含信息以及操纵这些信息的方法。
操纵信息后，将向根组件发出一个事件，并向存储分派一个操作，从而修改状态。当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递到包含mat手风琴和mat-expansion-panels的组件。
问题：发出变更后，席子手风琴的所有扩展面板都关闭了。由于用户应该能够进行进一步的更改，因此这是一个与用户体验有关的非常大的问题。
编辑1：
我将扩展面板的扩展输入设置为truewith <mat-expansion-panel [expaned]="true" ... >，并且行为更改为始终打开所有扩展面板进行任何更改。因此，我认为当输入更改时，似乎重新创建了整个组件。可能是因为我订阅了上面的组件，并且只传递了新数据。请看我是否可以通过在输入中传递可观察值来更改此设置。
编辑2：我派生了ibenjelloun的stackblitz应用程序，并添加了2美分，该示例显示了无法正常工作的行为：https : //stackblitz.com/edit/stackoverflow-49691295-qulg9d我发现了，删除了模仿ngrx的行行为是可行的，但是用折线也无法显示根组件中的示例（糟糕，这应该是我的：看，我不尝试不可能的示例）。这让我有些惊讶，因为我正在使用的应用程序也以相同的方式设置了acordion，但确实可以正常工作。
由于这是工作，我无法显示任何导致问题的原始代码。