Свойство «видимость» не существует для типа «UsersComponent»

Question

Это мой app.animation.ts файл:

import { trigger, state, style, animate, transition } from '@angular/animations';

export function visibility() {
    return trigger('visibility', [
        state('shown', style({
            transform: 'scale(1.0)',
            opacity: 1
        })),
        state('hidden', style({
            transform: 'scale(0.5)',
            opacity: 0
        })),
        transition('* => *', animate('0.5s ease-in-out'))
    ]);
}
export function flyInOut() {
    return trigger('flyInOut', [
        state('*', style({ opacity: 1, transform: 'translateX(0)'})),
        transition(':enter', [
            style({ transform: 'translateX(-100%)', opacity: 0 }),
            animate('500ms ease-in')
        ]),
        transition(':leave', [
            animate('500ms ease-out', style({ transform: 'translateX(100%)', opacity: 0}))
        ])
    ]);
}

export function expand() {
    return trigger('expand', [
        state('*', style({ opacity: 1, transform: 'translateX(0)' })),
        transition(':enter', [
            style({ transform: 'translateY(-50%)', opacity: 0 }),
            animate('200ms ease-in', style({ opacity: 1, transform: 'translateX(0)' }))
        ])
    ]);
}

И следующие файлы users.component.ts и users.compontnt.html соответственно:

users.component.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { ImagesService} from '../services/images.service';
import { Image } from '../shared/image';
import { User } from '../shared/user';
import { visibility, flyInOut, expand } from '../animations/app.animation';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss'],
  host: {
    '[@flyInOut]': 'true',
    'style': 'display: block;'
  },
  animations: [
    visibility(),
    flyInOut(),
    expand()
  ]
})
export class UsersComponent implements OnInit {

  user: User;
  default_user: Image;
  errMess: string;

  constructor(private imageService: ImagesService,
    private authService: AuthService) { }

  ngOnInit(): void {

    this.authService.getUser()
    .subscribe(user => this.user = user
    ,errmess => this.errMess = <any>errmess);

    this.imageService.getImages()
    .subscribe(images => this.default_user = images.find(image => image.filename == 'default_user.png')
    ,errmess => this.errMess = <any>errmess);
  }

}

И users.component.html:

Но я не знаю, почему я получаю эти сообщения об ошибках:

ERROR in src/app/users/users.component.html:16:48 - error TS2339: Property 'visibility' does not exist on type 'UsersComponent'.

16   <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
                                                  ~~~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.
src/app/users/users.component.html:23:35 - error TS2339: Property 'baseURL' does not exist on type 'UsersComponent'.

23       <img mat-card-image src="{{ baseURL + default_user.filename}}" >
                                     ~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.
src/app/users/users.component.html:32:48 - error TS2339: Property 'visibility' does not exist on type 'UsersComponent'.

32   <div fxFlex="40" *ngIf="user" [@visibility]="visibility" [@expand]>
                                                  ~~~~~~~~~~

  src/app/users/users.component.ts:11:16
    11   templateUrl: './users.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component UsersComponent.

Answer 1

Синтаксис [@visibility]="visibility" использует анимацию с именем visibility и связывает состояние анимации со свойством, также названным visibility, которое, как ожидается, существует в компоненте.

Ваш класс UsersComponent не имеет похоже, что у этого свойства visibility нет значения 'shown' или 'hidden'.