Angular: service和ngrx返回undefined_HTMLElement属性返回undefined -- Angular_访问ngrx Observable中的变量总是返回undefined - 腾讯云开发者社区

Angular: service和ngrx返回undefined

基础概念

在Angular中，service是一种用于封装可重用的业务逻辑的类。它们通常用于在组件之间共享数据和方法。ngrx是一个状态管理库，用于Angular应用程序，它基于Redux模式，帮助管理应用程序的状态。

问题分析

当你在Angular中使用service或ngrx时，可能会遇到返回undefined的情况。这通常是由于以下原因之一：

Service未正确注入：确保在组件或模块中正确注入了服务。
ngrx Store未正确配置：确保在模块中正确配置了ngrx store，并且在组件中正确订阅了store。
初始状态未定义：如果ngrx store的初始状态未定义，可能会导致返回undefined。
选择器（Selectors）未正确使用：确保在组件中正确使用了ngrx的选择器来获取状态。

解决方法

1. 确保Service正确注入

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  getData() {
    return 'some data';
  }
}

// my.component.ts
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my',
  template: `<div>{{ data }}</div>`
})
export class MyComponent {
  data: string;

  constructor(private myService: MyService) {
    this.data = this.myService.getData();
  }
}

2. 确保ngrx Store正确配置

// store.ts
import { createAction, createReducer, on, createSelector, createFeatureSelector } from '@ngrx/store';

export const initialState = {
  data: undefined
};

export const setData = createAction('[Data] Set Data', (data: any) => ({ data }));

export const dataReducer = createReducer(
  initialState,
  on(setData, (state, { data }) => ({ ...state, data }))
);

// app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { dataReducer } from './store';

@NgModule({
  imports: [
    StoreModule.forRoot({ data: dataReducer })
  ]
})
export class AppModule {}

// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { setData } from './store';

@Component({
  selector: 'app-my',
  template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
  data$ = this.store.select(state => state.data);

  constructor(private store: Store) {
    this.store.dispatch(setData({ data: 'some data' }));
  }
}

3. 确保初始状态已定义

// store.ts
export const initialState = {
  data: 'initial data'
};

4. 确保选择器正确使用

// store.ts
export const selectData = createSelector(
  (state) => state.data,
  (data) => data
);

// my.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectData } from './store';

@Component({
  selector: 'app-my',
  template: `<div>{{ data$ | async }}</div>`
})
export class MyComponent {
  data$ = this.store.select(selectData);

  constructor(private store: Store) {}
}