Angular 角度9-Datorama Akita存储显示值

我目前正在尝试使用秋田在Angular 8中建立一个简单的表单。 在继续之前，我必须告诉你，我不是一个开发人员，我对这个角度的世界很陌生。。。甚至不提国家管理理念。请在阅读我的代码时记住：）

下面是我试图实现的目标的简要描述。用户在输入中输入注册号的第一个字符。下面，在自动完成中，建议使用数据库中已知的注册号。当用户选择其中一个值时，将使用相应的ID触发服务，并获取所选车辆（本例中为飞机）的数据。返回的数据显示在选择框下方

到目前为止还不错。。。我的自动完成框工作得很好，商店里的人（显然）如预期的那样多。我使用Redux devtools在存储中看到了正确的数据

我的问题出现在我试图显示数据时。。。在我的页面上，我可以通过

{{{store\u airpair$|json}}

看到商店中的整个对象，这给了我如下信息：

    {
  "_isScalar": false,
  "source": {
    "_isScalar": false,
    "source": {
      "_isScalar": false,
      "source": {
        "_isScalar": false,
        "source": {
          "_isScalar": false,
          "observers": [],
          "closed": false,
          "isStopped": false,
          "hasError": false,
          "thrownError": null,
          "_value": {
            "entities": {},
            "ids": [],
            "loading": true,
            "error": null,
            "aircraft_id": 18737,
            "manufacturer_id": 1,
            "manufacturer_name": "Cessna Aircraft",
            "model_id": 60,
            "model_name": "172",
            "model_variant": "N",
            "model_subname": "Skyhawk",
            "model_designator": "C172",
            "serial_number": "17270821",
            "registration": "C-GVNH",
            "year_manufacture": 1978,
            "mtom_kg": 1043,
            "seats": null,
            "address_hex": "c07d76",
            "registration_status": "Registered"
          }
        }
      },
      "operator": {}
    },
    "operator": {}
  },
  "operator": {}
}

我只是想知道如何简单地访问存储中的数据并显示它。比如说“制造商名称”

这是我的飞机。商店。ts：

import { Injectable } from '@angular/core';
import { EntityStore, StoreConfig } from '@datorama/akita';
import { AircraftModel, AircraftState } from './aircraft.model';

export function createInitialState(): AircraftState {
  return {
    aircraft_id: null,
    manufacturer_id: null,
    manufacturer_name: null,
    model_id: null,
    model_name: null,
    model_variant: null,
    model_subname: null,
    model_designator: null,
    serial_number: null,
    registration: null,
    year_manufacture: null,
    mtom_kg: null,
    seats: null,
    address_hex: null,
    registration_status: null
  };
}

export function createAircraft(aircraft: AircraftState) {
  return { ...aircraft };
}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'aircraft', idKey: 'aircraft_id' })
export class AircraftStore extends EntityStore<AircraftState, AircraftModel> {
  constructor() {
    super(createInitialState());
  }

  set(data) {
    //console.log('set function triggered');
    const aircraft = createAircraft(data.body[0]);
    this.update(aircraft);
  }
}

从'@angular/core'导入{Injectable}；
从'@datorama/akita'导入{EntityStore，StoreConfig}；
从“./aircraft.model”导入{AircraftModel，AircraftState}；
导出函数createInitialState（）：AircraftState{
返回{
飞机识别号：空，
制造商标识：空，
制造商名称：空，
型号标识：空，
型号名称：空，
模型变量：空，
模型_子名称：null，
型号代号：空，
序列号：空，
注册号：空，
制造年份：空，
mtom_kg:空，
座位：空，
地址：空，
注册状态：空
};
}
导出功能createAircraft（飞机：AircraftState）{
返回{……飞机}；
}
@可注射（{providedIn:'root'}）
@StoreConfig（{name:'raveler'，idKey:'raveler_id'}）
export class AircraftStore扩展了EntityStore{
构造函数（）{
超级（createInitialState（））；
}
集合（数据）{
//console.log（'set function triggered'）；
const aircraft=createAircraft（data.body[0]）；
更新（飞机）；
}
}

这是aircraft.service.ts：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ID } from '@datorama/akita';
import { Configuration } from '../../_constants/app.constants';
import { AircraftDataService } from './aircraft-data.service';
import { AircraftState } from './aircraft.model';
import { AircraftStore } from './aircraft.store';

@Injectable({ providedIn: 'root' })
export class AircraftService {
  entities: AircraftState;
  private actionUrl: string;

  constructor(
    private aircraftStore: AircraftStore,
    private http: HttpClient,
    private configuration: Configuration,
    private aircrafDataService: AircraftDataService
  ) {
    this.actionUrl = configuration.apiUrl;
  }

  get(aircraftId: ID) {
    return this.aircrafDataService
      .getAircraft(aircraftId)
      .subscribe((response: HttpResponse<any>) => this.aircraftStore.set(response));
  }

}

从'@angular/common/http'导入{HttpClient，HttpResponse}；
从“@angular/core”导入{Injectable}；
从'@datorama/akita'导入{ID}；
从“../../\u constants/app.constants”导入{Configuration}；
从“./aircraft data.service”导入{AircraftDataService}；
从“./aircraft.model”导入{AircraftState}；
从“./aircraft.store”导入{AircraftStore}；
@可注射（{providedIn:'root'}）
出口级飞机服务{
实体：飞机国；
私有actionUrl:string；
建造师(
私人飞机店：飞机店，
私有http:HttpClient，
私有配置：配置，
私人飞机数据服务：飞机数据服务
) {
this.actionUrl=configuration.apiUrl；
}
get（飞机ID:ID）{
返回此文件。aircrafDataService
.getAircraft（aircraftId）
.subscribe（（响应：HttpResponse）=>this.aircraftStore.set（响应））；
}
}

以下是aircraft.query.ts：

import { Injectable } from '@angular/core';
import { QueryEntity } from '@datorama/akita';
import { AircraftModel, AircraftState } from './aircraft.model';
import { AircraftStore } from './aircraft.store';

@Injectable({ providedIn: 'root' })
export class AircraftQuery extends QueryEntity<AircraftState, AircraftModel> {
    constructor(protected store: AircraftStore) {
    super(store);
  }
}

从'@angular/core'导入{Injectable}；
从“@datorama/akita”导入{QueryEntity}；
从“./aircraft.model”导入{AircraftModel，AircraftState}；
从“./aircraft.store”导入{AircraftStore}；
@可注射（{providedIn:'root'}）
导出类飞机查询扩展查询实体{
建造商（受保护仓库：飞机仓库）{
超级（商店）；
}
}

所以我的问题是：如何显示商店中的任何值？

---

提前感谢您的帮助。

解决方案

由于您正在处理一个可观察对象，因此需要使用。因此，在您的示例中，您将使用：

{{ (store_aircraft$ | async)?.manufacturer_name }}

了解我们为什么使用？。看

旁注

在您的aircraft.service.ts中，在get中，您订阅了getAircraft。您应该避免在服务中订阅，并且应该在发出调用的地方订阅，在大多数情况下，调用将在组件中进行

为此,

this.aircrafDataService
  .getAircraft(aircraftId)
  .pipe(
      tap(response => this.aircraftStore.set(response))
  );

然后在组件中，只需执行以下操作：

this.aircrafDataService.getAircraft().subscribe();

---

另一件需要考虑的事情是，但我将留给您阅读。

嗨，谢谢您的回答。不幸的是，它不起作用。页面上的值根本不会出现，控制台中也没有任何错误。在发布我的问题之前，我尝试了很多选择。这应该与呈现可观察值一样简单。让我困惑的是，商店里的人果然满满当当。