Angular Ngrx Select 器返回部分对象

这是一个没有使用Partial作为构造函数的例子.

最后，如您所见，我使用的是没有部分格式的订阅者.

Select 器最重要的一点是， 应该是当时给出的"国家名称" ProvideStore(...)

App.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import {
  createAction,
  createReducer,
  createSelector,
  on,
  props,
  provideStore,
} from '@ngrx/store';

import { routes } from './app.routes';

export class Product {
  id?: string;
  product?: string;
  price?: number;
  constructor(id: string, product: string, price: number) {
    this.id = id;
    this.product = product;
    this.price = price;
  }
}

export type ProductState = {
  id?: string;
  product?: string;
  price?: number;
};

export type AppState = {
  products: ProductState[];
};

export const productsInitialState = [
  {
    id: '1',
    product: 'example',
    price: 0.0,
  },
];

export const initialState: AppState = {
  products: productsInitialState,
};

export const selectProductsState = (state: AppState) => state.products;

export const selectProducts = createSelector(selectProductsState, (state) => {
  return state;
});

/**
 * Boilerplate
 */
export const action = createAction(
  '[Example consume SELECT]',
  props<Product>()
);

export const productReducer = createReducer(
  initialState,
  on(action, (state, { id, product, price }) => {
    return { ...state, products: [...state.products, { id, product, price }] };
  })
);

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore({ products: productReducer }),
    provideRouter(routes),
  ],
};

App.component.ts

    import { Component } from '@angular/core';
    import { CommonModule, DecimalPipe } from '@angular/common';
    import { RouterOutlet } from '@angular/router';
    import { Store } from '@ngrx/store';
    import { AppState, Product, action, selectProducts } from './app.config';
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [CommonModule, DecimalPipe, RouterOutlet],
      template: `
        <h1>{{ title }}</h1>
        <ul>
          @for(product of products; track product.id) {
          <li>
            <span>
              {{ product.id }}
              {{ product.product }}
              {{ product.price | number }}
            </span>
          </li>
          } @empty { 0 products. }
        </ul>
      `,
    })
    export class AppComponent {
      title = 'ngrx-selector-returns-a-partial-object';
      products?: Product[];
      constructor(private store: Store<AppState>) {
        //Add
        this.store.dispatch(action(new Product('2', 'my new product', 0.02)));
        //Example
        this.store.select(selectProducts).subscribe({
          next: (value: any) => {
            console.dir(value);
            this.products = value.products;
          },
        });
}}

Package.json

{
  "name": "ngrx-selector-returns-a-partial-object",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@ngrx/store": "^16.3.0",
    "@ngrx/store-devtools": "^16.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.1",
    "@angular/cli": "^17.0.1",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}