Angular 可以访问对象但不能读取属性答案

【问题标题】：Angular can access to object but cannot read propertyAngular 可以访问对象但不能读取属性
【发布时间】：2020-11-28 16:42:35
【问题描述】：

我遵循了从父组件获取pages并将其正确加载为*ngFor的设置，但是一旦我使用函数通过{{ getBookName(id) }}获取相关书名，即使它返回书对象，也找不到它的属性如book.name 并返回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
            }
        )
    }

}

【问题讨论】：

不要将函数与模板绑定试试这个。 var book$ = this.store$.select(BookSelectors.selectBookById, id)。并在模板中使用异步管道绑定这个 observable。就是这样。
！！！它在*ngFor 内部并使用不同的id 作为第二个参数，我们如何将动态ids 从模板发送到没有功能的组件？？

标签： angular observable ngrx ngrx-store

【解决方案1】：

您尝试执行的操作无效。您正在尝试从模板订阅并立即获取值，这将无法以异步/可观察的方式工作。您应该改为使用 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>

【讨论】：

感谢@waseem-rakab，但它返回了相同的结果，Cannot read property 'name' of undefined 也尝试了其他属性并得到相同的错误，正如我提到的它可以将书籍对象返回为console.log，但不能返回里面的具体属性！
模板没有问题，问题来自.ts文件ERROR TypeError: Cannot read property 'name' of undefined at MapSubscriber.project (pages.component.ts:52)正是调用return book.name的那一行
感谢@waseem-rakab，您已修复此错误

【解决方案2】：

尝试使用异步管道：| async

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

另一种方法是在 object?.attribute 等属性之前使用 ?

【讨论】：