属性 'take' 在类型 'Store<State>' 上不存在 ngrx/store
Property 'take' does not exist on type 'Store<State>' ngrx/store
在我的功能中选择状态时,我尝试使用 属性 'take',但出现错误 Property 'take' does not exist on type 'Store<State>
。拜托,有人知道发生了什么事吗?我想要这样做的原因是因为我必须确定用户何时单击按钮 "Add space" 将我的模板更改为表单。由于此模式还会更改父模板,因此我使用 @ngrx/store.
对其进行管理
我的代码:
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { Space } from '../../../shared/space.model';
// import { SpacesService } from '../../spaces.service';
import * as SpacesActions from '../../store/spaces.actions';
import * as fromSpaces from '../../store/spaces.reducers';
@Component({
selector: 'app-space-item',
templateUrl: './space-item.component.html',
styleUrls: ['./space-item.component.scss']
})
export class SpaceItemComponent implements OnInit, OnDestroy {
@Input() space: Space;
@Input() index: number;
private addMode: boolean;
private editMode = false;
// updatedSpaceName: string;
// updatedSpace: Space;
private subscription: Subscription;
updatedSpaceName: string;
updatedPicture: string;
constructor(
// private spacesService: SpacesService,
private store: Store<fromSpaces.FeatureState>) { }
ngOnInit() {
this.subscription = this.store.select('spaces')
.take(1)
.subscribe(
data => {
if (data.addMode) {
this.addMode = data.addMode;
} else {
this.addMode = false;
}
}
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
onEnableEdit() {
this.editMode = true;
this.updatedSpaceName = this.space.name;
this.updatedPicture = this.space.picture;
// console.log(this.updatedSpace);
}
onUpdate() {
this.onCancelEdit();
const updatedSpace = new Space(this.updatedSpaceName, this.updatedPicture);
// this.spacesService.updateSpace(updatedSpace, this.index);
this.store.dispatch(new SpacesActions.UpdateSpace({index: this.index, updatedSpace}));
}
onCancelEdit() {
this.editMode = false;
// this.updatedSpace = this.space;
}
onCancelAdd() {
// this.spacesService.addModeActivated.next(false);
this.store.dispatch(new SpacesActions.SwitchAddMode(false));
}
onDelete() {
// this.spacesService.deleteSpace(this.index);
this.store.dispatch(new SpacesActions.DeleteSpace(this.index));
}
onAddSpace(form: NgForm) {
const value = form.value;
const newSpace: Space = new Space(value.spaceName);
// this.spacesService.addSpace(newSpace);
this.store.dispatch(new SpacesActions.AddSpace(newSpace));
}
}
尝试导入它
import 'rxjs/add/operator/take';
对于 Angular > 6,Angular 应用程序包大小使用可出租运算符减小,因为它们 tree-shakable
import { take } from 'rxjs/operators';
...
this.store.select('spaces').pipe(take(1)).subscribe();
如果angular 6:
1) 从 rxjs 导入
import { take } from 'rxjs/operators';
2) 与pipe
方法一起使用
.pipe(take(1))
是最新版本angular的兼容性问题,需要rxjs-compat。
解决方案:
npm install --save rxjs-compat
在我的功能中选择状态时,我尝试使用 属性 'take',但出现错误 Property 'take' does not exist on type 'Store<State>
。拜托,有人知道发生了什么事吗?我想要这样做的原因是因为我必须确定用户何时单击按钮 "Add space" 将我的模板更改为表单。由于此模式还会更改父模板,因此我使用 @ngrx/store.
我的代码:
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { Space } from '../../../shared/space.model';
// import { SpacesService } from '../../spaces.service';
import * as SpacesActions from '../../store/spaces.actions';
import * as fromSpaces from '../../store/spaces.reducers';
@Component({
selector: 'app-space-item',
templateUrl: './space-item.component.html',
styleUrls: ['./space-item.component.scss']
})
export class SpaceItemComponent implements OnInit, OnDestroy {
@Input() space: Space;
@Input() index: number;
private addMode: boolean;
private editMode = false;
// updatedSpaceName: string;
// updatedSpace: Space;
private subscription: Subscription;
updatedSpaceName: string;
updatedPicture: string;
constructor(
// private spacesService: SpacesService,
private store: Store<fromSpaces.FeatureState>) { }
ngOnInit() {
this.subscription = this.store.select('spaces')
.take(1)
.subscribe(
data => {
if (data.addMode) {
this.addMode = data.addMode;
} else {
this.addMode = false;
}
}
);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
onEnableEdit() {
this.editMode = true;
this.updatedSpaceName = this.space.name;
this.updatedPicture = this.space.picture;
// console.log(this.updatedSpace);
}
onUpdate() {
this.onCancelEdit();
const updatedSpace = new Space(this.updatedSpaceName, this.updatedPicture);
// this.spacesService.updateSpace(updatedSpace, this.index);
this.store.dispatch(new SpacesActions.UpdateSpace({index: this.index, updatedSpace}));
}
onCancelEdit() {
this.editMode = false;
// this.updatedSpace = this.space;
}
onCancelAdd() {
// this.spacesService.addModeActivated.next(false);
this.store.dispatch(new SpacesActions.SwitchAddMode(false));
}
onDelete() {
// this.spacesService.deleteSpace(this.index);
this.store.dispatch(new SpacesActions.DeleteSpace(this.index));
}
onAddSpace(form: NgForm) {
const value = form.value;
const newSpace: Space = new Space(value.spaceName);
// this.spacesService.addSpace(newSpace);
this.store.dispatch(new SpacesActions.AddSpace(newSpace));
}
}
尝试导入它
import 'rxjs/add/operator/take';
对于 Angular > 6,Angular 应用程序包大小使用可出租运算符减小,因为它们 tree-shakable
import { take } from 'rxjs/operators';
...
this.store.select('spaces').pipe(take(1)).subscribe();
如果angular 6:
1) 从 rxjs 导入
import { take } from 'rxjs/operators';
2) 与pipe
方法一起使用
.pipe(take(1))
是最新版本angular的兼容性问题,需要rxjs-compat。
解决方案:
npm install --save rxjs-compat