Chrome Разработчик "ОШИБКА TypeError: Невозможно прочитать свойство 'animate' of null" в проекте Angular - PullRequest
Новая
       51

Chrome Разработчик "ОШИБКА TypeError: Невозможно прочитать свойство 'animate' of null" в проекте Angular

0 голосов
/ 29 марта 2020

Цель : анимировать затухание в элементе с Typescript в Angular, используя 

document.getElementById("elementID").animate

Я использовал пример (немного его изменил) с developer.mozilla.org

Ожидается: для работы без ошибок.

Фактические результаты: код работает, но имеет Chrome ошибок разработчика.

Chrome подробности ошибки:

core. js: 3838 ОШИБКА TypeError: Невозможно прочитать свойство 'animate' со значением null

на PlywoodHebComponent.pu sh .. / src / app / components / plywood-heb / plywood-heb.component.ts.PlywoodHebComponent.fadeIn (plywood-heb.component.ts: 22)
на PlywoodHebComponent.pu sh .. / src / app / components / plywood-heb / plywood-heb.component .ts. (ядро. js: 14774)
в SafeSubsc riber.schedulerFn [as _next] (core. js: 24856)
в SafeSubscriber.pu sh .. / node_modules / rxjs / _esm5 / internal / Subscriber. js .SafeSubscriber .__ tryOrUnsub (подписчик. js: 192)
на SafeSubscriber.pu sh .. / node_modules / rxjs / _esm5 / internal / Subscriber. js .SafeSubscriber.next (подписчик. js: 130)
на подписчике. pu sh .. / node_modules / rxjs / _esm5 / internal / Subscriber. js .Subscriber._next (Подписчик. js: 76)
в Subscriber.pu sh .. / node_modules / rxjs / _esm5 / internal / Subscriber. js .Subscriber.next (подписчик. js: 53)

ОБНОВЛЕНИЕ:

Что я пытался: I увидел, что если я сотру * ngIf, проблема исчезнет. Что означает, что элемент проверяется на предмет его идентификатора в fadeIn () до его появления в DOM. Я думаю, что я должен использовать видимость вместо * ngIf.

Какой-то код:

HTML: 

<nav class="sidebar">
    <text-style2-container>
        <app-plywood-side-navbar (stringOutput)=getChildEvent($event)></app-plywood-side-navbar>
    </text-style2-container>
</nav>
<article>
    <div class="description-text" *ngIf="imageName=='twin';">
        <text-style1-container>
            <app-twin-heb></app-twin-heb>
        </text-style1-container>
    </div>
    <div class="description-text" *ngIf="imageName=='okoume';">
        <text-style1-container>
            <app-okoume-heb></app-okoume-heb>
        </text-style1-container>
    </div>
    <div class="description-text" *ngIf="imageName=='birch';">
        <text-style1-container>
            <app-birch-heb></app-birch-heb>
        </text-style1-container>
    </div>
</article>
<div class="image-box" *ngIf="imageName;">

    <!-- "image" id element is fading in using the typescript but has errors on chrome developer mode -->

    <img id="image" src="../../../assets/images/plywoods/{{imageName}}-plywood.jpg" alt="{{imageName}} plywood">

</div>

Машинопись: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-plywood-heb',
  templateUrl: './plywood-heb.component.html',
  styleUrls: ['./plywood-heb.component.css']
})
export class PlywoodHebComponent {
  imageName: string;
  getChildEvent($event) {
    this.imageName = $event;
    this.fadeIn();  
  }
  fadeIn(): void {
    document.getElementById("image").animate([
      // keyframes
      { opacity: '0' },
      { opacity: '1' }
    ], {
      duration: 2000,
    });
  }
}

CSS: 

.sidebar, .image-box, .description-text, img {
    box-sizing: border-box;
    float: right;
}
.sidebar, .image-box, .description-text {
    text-align: right;
    padding-top: 150px;
}
.sidebar {
    width: 15%; 
    padding-right: 50px;
}
.image-box, .description-text {
    width: 40%;
}
.image-box {
    margin-top: 2rem;
}
img {
    width: 50%;
    padding-right: 100px;

    /* fading in animation for autoran plywood route */
    animation-name: fadeInAnimation;
    animation-duration: 5s;
}
.description-text {
    text-align: right;
    padding-right: 100px;
}
@keyframes fadeInAnimation {
    from { opacity: 0;}
    to { opacity: 1;}
}

Редактировать: добавление также индекса. html, поскольку в нем нет js В нем.

индекс . html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>אורי גרוס עצים ולבידים</title>
  <base href="/">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body dir="rtl">
    <app-Layout></app-Layout>
</body>
</html>

1 Ответ

0 голосов
/ 29 марта 2020

@ MikeOne: я нашел решение для своего кода. @Arunkumar Ramasamy: Спасибо, что показали мне, что проверить. Я исправил это, изменив свой код html после того, как понял, что * ngIf вызывает проблему, и я мог бы просто скрыть элемент, а не уничтожить его. Так что я изменил только отображение элемента. Я прилагаю html код: 

<div class="image-box" [style.display]="imageName? 'block' : 'none'">
...