Невозможно прочитать свойство недоопределенного - PullRequest
Новая
       6

Невозможно прочитать свойство недоопределенного

0 голосов
/ 22 мая 2019

Я получаю странную ошибку. Я использую 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)

В базе данных, под коллекцией компонентов, у меня есть ссылка на идентификатор автора, принадлежащий другой коллекции под названием users .

В моем конструкторе 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 }}, который работает, НО я получаю эту консольную ошибку.

Чего мне не хватает?

Спасибо!

1 Ответ

0 голосов
/ 22 мая 2019

Ваши подписки внутри forEach не завершаются, когда {{ feature.author.firstName }} отображается в самом начале.Вот почему вы получаете сообщение об ошибке, но по-прежнему видите переменную, отображаемую в 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);
      }
    );
}
...