“take”属性在类型为“Store<State>”的对象上不存在，这是关于ngrx/store的问题。

Question

我正在尝试在选择一个状态时使用属性“take”，但是我遇到了错误“Property'take' does not exist on type'Store<State>”。请问有人知道发生了什么吗？我想要这样做的原因是因为我需要确定用户何时单击“添加空间”按钮，该按钮将我的模板更改为表单。由于此模式还会更改父模板，因此我正在使用@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));
      }
    }

- Wagner D'Amaral

Answer 1

尝试导入它

 import 'rxjs/add/operator/take'; 

对于Angular >6，使用可导入的操作符可以减小Angular应用程序的捆绑包大小，因为它们是可被摇树优化的

import { take } from 'rxjs/operators';
...

this.store.select('spaces').pipe(take(1)).subscribe();

- Fateh Mohamed

Answer 2

对于Angular 6的情况：

1）从rxjs导入

import { take } from 'rxjs/operators';

2) 使用 pipe 方法进行操作。

.pipe(take(1))

- ego

Answer 3

最新版的Angular存在兼容性问题，需要使用rxjs-compat。

解决方案：

npm install --save rxjs-compat

- Diego Enrique

---

对于 Angular8，这个方法对我有效。我认为安装 rxjs-compat 是必须的。 - Venky