在 angular html 模板中显示来自ngrx 存储的单个 object

Question

我需要有关显示 object 的帮助。 代码如下：

office.action.ts：

export const getOfficeRequest = createAction('[Office] Get Office Request', props<{key: string}>());
export const getOfficeDone = createAction('[Office] Get Office Request Done', props<{office: Office}>());

office.reducer.ts：

@Effect()
  getOffice$ = this.action$.pipe(
    ofType(getOfficeRequest),
    switchMap((action) => this.OFMService.getOffice(action.key)
    .pipe(
      map((office: Office) =>  getOfficeDone({ office })))
    )
  );

组件.module.ts：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { faEllipsisV, faPhoneAlt, faUserFriends } from '@fortawesome/free-solid-svg-icons';
import { OfficeComponent } from './office-list/office/office.component';
import { NgModule } from '@angular/core';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { CommonModule } from '@angular/common';

import {EffectsModule} from '@ngrx/effects';
import { officesReducer } from './../shared';

import { ComponentsRoutingModule } from './components-routing.module';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { RouterModule } from '@angular/router';
import { OfficeListComponent } from './office-list/office-list.component';
import {OfficeDetailsComponent} from './office-list/office-details/office-details.component';
import {OfficeEffects} from './../shared/store/effects/office.effects';


import {  ReactiveFormsModule } from '@angular/forms';
import { LoadingComponent, ModalModule } from '../shared';
import { StaffComponent } from './staff/staff.component';
import { StoreModule } from '@ngrx/store';



@NgModule({
  declarations: [OfficeComponent, OfficeListComponent, OfficeDetailsComponent, StaffComponent, LoadingComponent],
  imports: [
    CommonModule,
    ComponentsRoutingModule,
    FontAwesomeModule,
    RouterModule,
    ReactiveFormsModule,
    StoreModule.forRoot({ offices: officesReducer }),
    StoreDevtoolsModule.instrument(),
    EffectsModule.forRoot([ OfficeEffects ]),
    NgbModule,
    ModalModule],
})
export class ComponentsModule {
  constructor() {
    library.add(faPhoneAlt, faEllipsisV, faUserFriends);
  }
}

office-details.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { getOfficeRequest } from 'src/app/shared';

import { Office } from 'src/app/shared/models/office.model';
import { OfficemanService } from '../../../shared/services/officeman.service';

@Component({
  selector: 'app-office-details',
  templateUrl: './office-details.component.html',
  styleUrls: ['./office-details.component.scss']
})
export class OfficeDetailsComponent implements OnInit {

  office$ = this.store.pipe(select(theState => theState.office));
  // office: Office;
  id: string;
  constructor(
    private officeMan: OfficemanService,
    private route: ActivatedRoute,
    private router: Router,
    private store: Store<{office: Office}>) {
    this.id = route.snapshot.params.id;
  }

  ngOnInit(): void {
    const key = this.id;
    this.store.dispatch(getOfficeRequest({key}));
  }

}

office-details.component.html

<div class="office-details text-center text-white" *ngIf="(office$ | async); let office;">
    <div class="office-details__office-card bg-primary shadow mx-2 mb-3">
        <div class="office-details__header text-white text-left px-4 pt-4 h3" [routerLink]="'/'"><i class="fas fa-arrow-left pr-4"></i>{{office?.officeName }}</div>
        <div class="office-details_contact-details text-left p-4 pt-2">
            <div class="office-details__address">Address: {{office | json}}</div>
            <div class="office-details__email">Email: {{office?.email }}</div>
            <div class="office-details__office-tel">Office Tel: {{office?.officeTel }}</div>
            <div class="office-details__max-capacity">Max Capacity: {{office?.maxOccupants }}</div>
        </div>
    </div>
    <app-staff [office]="office$" ></app-staff>
</div>

<app-loading *ngIf="!office$"></app-loading>

redux 工具显示正在从商店检索 object，但我无法在 html 模板上显示它。 我已经阅读了这里的许多其他条目，但它们不适用于我的情况。

它没有在控制台上显示任何错误消息。 但是当我尝试 console.log this.office时，它显示有一个 observable 并且值存在。 我不知道如何显示它们。 您的帮助将不胜感激。 我正在使用 Angular11。

Answer 1

这里发生了几件事。 必须订阅 Observables 才能监听产生的值。 在模板中，使用 AsyncPipe 订阅 observable 并获取其值。

另一部分是变量重新分配。 您已经使用异步 pipe 订阅了可观察的“office$”，并将其重新分配给“office”，因此您可以只使用 rest 的“office”值。

带有 *ngIf 的 div 之外的任何内容都需要再次使用异步 pipe。

<div class="office-details text-center text-white" *ngIf="(office$ | async); let office;">
    <div class="office-details__office-card bg-primary shadow mx-2 mb-3">
        <div class="office-details__header text-white text-left px-4 pt-4 h3" [routerLink]="'/'"><i class="fas fa-arrow-left pr-4"></i>{{office?.officeName }}</div>
        <div class="office-details_contact-details text-left p-4 pt-2">
            <div class="office-details__address">Address: {{office | json}}</div>
            <div class="office-details__email">Email: {{office?.email }}</div>
            <div class="office-details__office-tel">Office Tel: {{office?.officeTel }}</div>
            <div class="office-details__max-capacity">Max Capacity: {{office?.maxOccupants }}</div>
        </div>
    </div>
    <app-staff [office]="office" ></app-staff> <! -- here -->
</div>

<app-loading *ngIf="!(office$ | async)"></app-loading> <!-- here -->

Answer 2

在 office.reducer.ts 中：

const office = new Office();

export const officeReducer = createReducer<Office>(office,
    on(getOfficeDone, (_, action) => action.office));

我添加了一个选择器，用于将截获/复制的数据发送到商店。

然后我修改了component.module.ts：

 StoreModule.forRoot({ offices: officesReducer, office: officeReducer }),

这是我在解决方案中遗漏的全部内容。 Object 现在正在按计划填充模板。