Question

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

2020-02-28

327

angular undefined ngrx ngrx-store

我目前正在使用 NgRx 8 存储带有 imagename 和 url 的图像：

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

我的 Homecomponent 中有一个所有图像的列表，如果我单击一个图像，则会加载一个带有 ImageDetails 的新组件。在 URL 中我有图像的 id。现在我想获取 AzureImage 对象的 ImageName。因此我调用存储并获取带有 is 的 AzureImage 对象。当我将对象打印到控制台时，我可以看到带有名称和 url 的对象。

但如果我随后调用 Object.Name，则名称始终未定义。

这是组件类：

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
            }
        })
    )
}