Question

在页面中显示实体数据时遇到很多问题。我找到了解决方案。我使用由实体创建的ids数组，但是我对这种解决方案并不满意，您是否有更好的方法来显示实体数据？

我使用ids数组提取数据，但我想直接访问实体。

我错了吗？

对不起，如果我看起来很幼稚。

感谢您的光临

<div class="container-fluid">
    <div class="col-md-12">
        <div class="col-md-2">

        </div>
            <div class="purple text-center" ><i class="material-icons md-64">home</i> <span class="titleForm" *ngIf="!buildings.loading">Your Properties</span></div>
            <div *ngIf="(buildings | async).error" class="alert alert-danger alert-dismissible text-center" color="primary">
                <strong>Error!</strong> Please Check your Internet connect or Try to reaload the page, if the problem persist please contact Us
            </div>
            <mat-spinner *ngIf="buildings.loading"></mat-spinner>
            <ng-container *ngFor="let i = index, let id of (buildings|async).ids" >
                <mat-expansion-panel color="accent" *ngIf="!buildings.loading" >
                    <mat-expansion-panel-header>
                      <mat-panel-title color="accent" >
                        <h4 class="textWarn"><i class="material-icons">home</i> {{ (buildings | async).entities[(buildings | async).ids[i]].nameBuilding}}</h4>
                      </mat-panel-title>
                    </mat-expansion-panel-header>
                    <div >
                        <p >{{(buildings | async).entities[(buildings | async).ids[i]].address}}</p>
                        <p >{{(buildings | async).entities[(buildings | async).ids[i]].info}}</p>

                        <section class="text-right">
                          <div class="row text-center">
                            <div class="col-md-2"></div>
                              <div class="col-md-4">
                                  <button mat-raised-button class="text-center" type="submit" color="primary">View Rooms</button>
                              </div>
                              <div class="col-md-2">
                                  <button mat-raised-button class="text-center" type="submit" color="primary" [routerLink]="['/dashboard/new-room/', (buildings | async).ids[i]]" >New Room</button>
                              </div>
                              <div class="col-md-2">
                                  <button mat-raised-button class="text-center" type="submit" color="accent" [routerLink]="['/dashboard/edit-building/', (buildings | async).ids[i]]"
                                  routerLinkActive="router-link-active" routerLinkActive="router-link-active">Edit</button>
                              </div>
                              <div class="col-md-2">
                                  <button mat-raised-button class="text-center" color="warn" (click)="onDelete()">Delete {{ (buildings | async).ids[i] }}</button>
                              </div>

                          </div>
                        </section>
                      </div>

                  </mat-expansion-panel>
            </ng-container>
    </div>
  </div>

我想使用

entities.nameBuilding instead of (buildings | async).entities[(buildings | async).ids[i]].nameBuilding

在ts文件中，我使用了选择器来选择包含我的实体的零件。

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

import { StorageDataService } from 'src/app/shared/storage-data.service';
import { Building } from 'src/app/shared/models/building.model';


// import * as fromBuildings from '../store/building-list.reducer';
import * as fromIndexReducer from '../../../../reducers/index';
import * as fromBuildings from '../store/building-list.reducer';
import * as buildingsAction from '../store/building-list.actions';
import {selectAllBuildings} from '../store/building-list.selectors';

@Component({
  selector: 'app-list-building',
  templateUrl: './list-building.component.html',
  styleUrls: ['./list-building.component.css']
})
export class ListBuildingComponent implements OnInit {

  constructor(
    private storageData: StorageDataService,
    private store: Store<fromBuildings.BuildingsState>
              ) {}

  buildings$: Observable<any>;
  buildings: any;


  ngOnInit() {
    this.buildings$ = this.store.select<fromBuildings.BuildingsState>('buildings');
    // this.store.select<fromBuildings.BuildingsState>
    // this.buildings$ = this.store.select<fromBuildings.AppState[]>('statusList');
    this.buildings = this.buildings$;

    this.store.dispatch(new buildingsAction.LoadingBuildings());
    // console.log('buildings', this.buildings.source);
  }
  onDelete(id: string) {
    this.storageData.deleteBuilding(id);
  }


}

Answer 1

如果buildins.entities是一个数组，则可以像这样遍历它：

<ng-container *ngFor="let i = index, let building of (buildings|async).entities" >
    {{building.building.name}}
</ng-container>

Answer 2

如果您使用实体适配器，则内置了选择器：

export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();

您可以在组件中使用它们：

buildings$: Observable<any> = this.store.select(selectAll);

然后在html部分：

<div *ngFor="let building of buildings$ | async">
building.name 
</div>

选择器的返回类型为：

selectIds: string[] | number[]
selectEntities: Dictionary<T> (it is like a map just use: buldings[key])
selectAll: Buldings[]; (normal array of your entity type)
selectTotal: number

编辑：

我认为您的问题出在选择器逻辑之内。要访问功能状态时，需要创建功能选择器，然后可以使用适配器选择实体：

//create feature selector
export const getBuildingsState= createFeatureSelector('buildings');

//select entities calling feature selector first
export const getBuildings = createSelector(
getBuildingsState,
adapter.selectAll
)

最后在组件中：

this.store.select(getBuildings)

您的状态也应如下所示：

export interface BuildingsState extends EntityState<Buildings> {
  loading: boolean;
  logged: boolean;
  error: boolean;
}

export const adapter: EntityAdapter<Buildings> = createEntityAdapter<Buildings>(
  { selectId: buildings => buildings._id }
);

export const initialState: BuildingsState = adapter.getInitialState({
  loading: false,
  logged: true,
  error: false
});

Answer 3

我修复了这个问题，为此，我创建了一个管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'entities'})
export class Entities implements PipeTransform {
  transform(value: any, arg: any = null): any {

    return Object.values(value);

    // .map(key => value[key]);
    }
}

我直接查询了实体

let building of (buildings|async).entities | entities

就是这样，我知道这很简单，感谢您的帮助！

从实体获取数据

3 个答案: