Angular 可以访问对象但无法读取属性

Question

我遵循了从父组件获取 pages 并将其正确加载为 *ngFor 的设置，但是一旦我使用函数通过 {{ getBookName(id) }} 获取相关的书名，即使它returns 图书对象，无法找到它的 book.name 和 returns TypeError: Cannot read property 'name' of undefined

属性


import { Component, OnInit, EventEmitter, Input };
import { Store } from '@ngrx/store';
import { AppStore } from '../shared/store.interface';
import * as BookSelectors from '../shared/book/book.selector';

@Component({
    selector: 'app-pages',
    template: `'
        <button *ngFor="let page of pages">
            page {{ page.number }} in {{ getBookName(page.book_id) }} <!-- page 32 in Book A -->
        </button>'`,
    styles: ['button{ border: 1px solid red }']
})
export class PagesComponent {

   @Input() pages: any[] = []; // comes from parent component

    constructor(private store$: Store<AppStore>) {}

    getBookName(id: number) {
        console.log(id) // 1
        this.store$.select(BookSelectors.selectBookById, id).subscribe(
            book => {
                console.log(book) // {id: 1, name: 'Book A', author: 'author A'} 
                return book.name // TypeError: Cannot read property 'name' of undefined
            }
        )
    }

}

Answer 1

尝试使用异步管道：| async

使用异步管道，您向视图指示该值来自承诺，并且在呈现视图时该值可能不可用。

另一种方法是在 object?.attribute

等属性之前使用 ?

Answer 2

您尝试执行的操作无效。您正在尝试从模板订阅并立即获取值，这种方式行不通 async/observable。您应该改用 angular 的异步管道。像这样。

getBookName(id: number) {
  return this.store$.select(BookSelectors.selectBookById, id).pipe(
    map((book) => {
      return book.name;
    })
  );

并在模板中像这样使用它

<button *ngFor="let page of pages">
  <div *ngIf="getBookName(page.book_id) | async as pageName">
    page {{ pageName }}
  </div>
</button>

Angular 可以访问对象但无法读取属性

Angular can access to object but cannot read property

angular

observable

ngrx

ngrx-store

Angular 可以访问对象但无法读取 属性

Angular can access to object but cannot read property

angular

observable

ngrx

ngrx-store

Angular 可以访问对象但无法读取属性