无法读取未定义的属性

Question

我遇到了一个奇怪的错误。我在一个项目中使用了 Angular 和 Firebase (Real time DB)，即使你一切都正确呈现，我在日志上遇到错误。

VM368 OpenIdeasComponent.ngfactory.js:20 错误类型错误：无法读取 未定义的属性“名字” 在 Object.eval [as updateRenderer] (VM368 OpenIdeasComponent.ngfactory.js:36) 在 Object.debugUpdateRenderer [as updateRenderer] (VM346 vendor.js:57875) 在 checkAndUpdateView (VM346 vendor.js:57250) 在 callViewAction (VM346 vendor.js:57486) 在 execEmbeddedViewsAction (VM346 vendor.js:57449) 在 checkAndUpdateView (VM346 vendor.js:57246) 在 callViewAction (VM346 vendor.js:57486) 在 execComponentViewsAction (VM346 vendor.js:57428) 在 checkAndUpdateView (VM346 vendor.js:57251) 在 callViewAction (VM346 vendor.js:57486)

在数据库的 Features 集合下，我有一个作者 ID 的引用，该作者 ID 属于另一个名为 users 的集合。

在我的 FeaturesModel 构造函数中，我将 author?: AuthorModel 作为可选参数。

因此，当我启动我的组件时，我使用 forEach 从 users 集合 中获取 作者数据 并将该对象分配给功能对象。

代码如下：

ideas.ts

ngOnInit() {
        this.fService.getFullFeature().subscribe(
          data => {
            this.features = data;
            this.features.forEach( el => {
              this.fService.getAuthor(el.userID).subscribe(
                authorData => {
                  const a = {
                    id: authorData.id,
                    firstName: authorData.firstName,
                    lastName: authorData.lastName,
                    email: authorData.email
                  };
                  el.author = a;
                },
                (e) => { console.error(e); }
              );
            });
            console.log(this.features);
          }
        );
    }

html

<div class="container-fluid">
    <div style="padding: 100px 0">
        <div class="row">
            <div class="container">
                <h1 class="green header text-center">Feature Summary</h1>
            </div>
        </div>
        <div class="row">
            <div class="container">
                <div class="row row-space link-effect" *ngFor="let idea of features" [routerLink]="['display/' + idea.id]" href="#modal" data-toggle="modal" data-target="#modal">
                    <div class="col-7">
                        <span class="open-ideas">{{ idea.title }}</span>
                    </div>
                    <div class="col-3 d-xs-none">
                        {{ idea.author.firstName }} {{ idea.author.lastName }}
                    </div>
                    <div class="col-2 d-xs-none">
                        <fa name="thumbs-up"></fa>
                        {{ idea.votes }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所以，理论上，现在我有一个包含作者信息的对象，在我添加的 HTML 上 {{ feature.author.firstName }}，它可以工作，但我收到此控制台错误。

我错过了什么？

谢谢！

Answer 1

当{{ feature.author.firstName }} 在一开始呈现时，您在 forEach 中的订阅尚未完成。这就是为什么您收到错误但仍然看到变量显示在 HTML 中的原因，因为它是在订阅完成后呈现的，因此是在错误消息之后。

在这种情况下你应该使用await async

async ngOnInit() {
    //created another promise
    const promise1 = await this.fService.getFullFeature().toPromise().then(
      async data => {
        this.features = data;
        this.features.forEach( el => {
          //you wait for the promise to complete in order for your code to move on
          //this might be slow if you have a lot of data in the this.features array
          const promise2 = await this.fService.getAuthor(el.userID).toPromise().then(
             authorData => {
              const a = {
                id: authorData.id,
                firstName: authorData.firstName,
                lastName: authorData.lastName,
                email: authorData.email
              };
              el.author = a;
            }
          ).catch((e) => { console.error(e); });
        });
        console.log(this.features);
      }
    );
}