存储中对象的 NgRx 属性始终未定义？

Question

我目前正在使用 NgRx 8 来存储带有 imagename 和 url:

的图像

export default class AzureImage {
    Id: number;
    Name: string;
    Url: string;
  }

我的 Home 组件中有一个所有图像的列表，如果我单击一个图像，则会加载一个带有 ImageDetails 的新组件。在 URL 中，我有图像的 ID。现在我想获取 AzureImage 对象的 ImageName。所以我打电话给商店并使用 is 获取 AzureImage-Object。当我将对象打印到控制台时，我可以看到名称为 url.

的对象

但是如果我之后调用 Object.Name 名称总是未定义的。

这里是组件-Class:

export class AzureimagedetailsComponent implements OnInit {

  constructor(private route: ActivatedRoute, private aspNetApiService: AspNetApiService, private store: Store<{ azureImages: AzureImageState }>) { }

  ngOnInit() {
    let id = +this.route.snapshot.paramMap.get('id');

    this.store.pipe(select('azureImages'))
      .pipe(
        map(store => {
          return store.AzureImages[id];
        })
      ).subscribe((k: AzureImage) => {
        console.log('Here i can see the Object with the Name',k)
        if (k !== null && k !== undefined) {
          console.log('Here is the name undefined',k.Name)
          this.aspNetApiService.analyzeImageByAzure(k.Name)
            .pipe(
              map(x => {
                console.log(x);
                this.analyzedImage = x;
              })
            )
        }
      });
      this.store.dispatch(AzureImageActions.BeginGetAzureImageAction());
  }

我是 NgRx 的状态管理新手。我是在做某事还是无法访问对象的属性是否正常？

Answer 1

您需要确保您的模型与从后端返回的内容匹配或映射到前端模型

任一个

export default class AzureImage {
    id: number; 
    name: string; // or whatever BE returns
    url: string;
  }

或在 API 服务中

getAll(): Observable<AzureImage[]> {
    this.http.get(...).pipe(
        map(data => data.map(d => {
            return {
                    Id: d.id,
                    Name: d.name,
                    Url: d.url
            }
        })
    )
}

存储中对象的 NgRx 属性始终未定义？

NgRx Properties of Object in store is always undefined?

undefined

ngrx

angular

ngrx-store