Question

我收到一个奇怪的错误。我在项目中使用Angular和Firebase （实时数据库），即使您一切都正确呈现，日志中也出现错误。

VM368 OpenIdeasComponent.ngfactory.js：20错误TypeError：无法读取未定义的属性“ firstName” 在Object.eval [作为updateRenderer]（VM368 OpenIdeasComponent.ngfactory.js：36）在Object.debugUpdateRenderer [作为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）

在数据库的“功能”集合下，我有一个作者ID的引用，该ID属于另一个名为“ 用户”的集合。

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

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

代码如下：

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

无法读取未定义的属性

ideas.ts

html

1 个答案: