Получить данные от сущности - PullRequest
0 голосов
/ 07 января 2019

У меня много проблем с отображением данных сущностей на странице. Я нашел решение. Я использую массив идентификаторов, созданный сущностью, но я не очень удовлетворен этим решением, у вас есть лучший способ показать данные сущности?

Я использовал массив 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);
  }


}

Ответы [ 3 ]

0 голосов
/ 07 января 2019

Если вы используете встроенный селектор адаптера объекта:

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

EDIT:

Я думаю, что ваша проблема в логике селектора. Если вы хотите получить доступ к состоянию вашей функции, вам нужно создать селектор функций, затем вы можете использовать адаптер для выбора сущностей:

//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
});
0 голосов
/ 07 января 2019

Я исправляю, для этого я создал трубу

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 

Вот и все, я знаю, что это было просто, спасибо за вашу помощь!

0 голосов
/ 07 января 2019

Если buildins.entities - это массив, вы можете перебирать его так:

<ng-container *ngFor="let i = index, let building of (buildings|async).entities" >
    {{building.building.name}}
</ng-container>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...