NgRx Свойства объекта в магазине всегда неопределены? - PullRequest
Новая
       30

NgRx Свойства объекта в магазине всегда неопределены?

1 голос
/ 28 февраля 2020

В настоящее время я использую NgRx 8 для хранения изображений с imagename и url: 

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

У меня есть список всех изображений в моем домашнем компоненте, если я нажимаю на одно изображение, загружается новый компонент с ImageDetails. В URL у меня есть идентификатор изображения. Теперь я хочу получить ImageName объекта AzureImage. Поэтому я звоню в магазин и получаю объект AzureImage с объектом is. Когда я печатаю Объект на консоль, я могу видеть Объект с именем и 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 для государственного управления. Я имею в виду что-то или это нормально, что я могу получить доступ к свойствам объектов?

1 Ответ

1 голос
/ 28 февраля 2020

Вы должны убедиться, что ваша модель соответствует тому, что возвращается из серверной ИЛИ карты в интерфейсную модель

ИЛИ 

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