Почему Type 'Album' is missing the following properties from type 'Album[]': length, pop, push, concat, and 28 more?

Question

[Speakermen]

//child
import { Component, Input, OnInit } from '@angular/core';
import { Album } from '../../models/album';

@Component({
  selector: 'app-album-item',
  templateUrl: './album-item.component.html',
  styleUrls: ['./album-item.component.css'],
})
export class AlbumItemComponent implements OnInit {
  //@Input() public album: any;
  @Input() public album: Album[];

  constructor() {
    this.album = [];
  }

  ngOnInit(): void {
    console.log(this.album);
  }
}

export interface Album {
  album_image: string;
  album_count: number;
  album_title: string;
}

<div class="wm-main-content">
  <div class="wm-main-section">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="wm-latestartist-album wm-albummasonry-list">
            <ul class="row">
              <div *ngFor="let album of albums">
                <app-album-item [album]="album"></app-album-item>
              </div>
            </ul>
          </div>
          <app-pagination></app-pagination>
        </div>
      </div>
    </div>
  </div>
</div>

//parent
import { Component, OnInit } from '@angular/core';
import { Album } from '../../models/album';

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
  styleUrls: ['./album.component.css'],
})
export class AlbumComponent implements OnInit {
  public albums: Album[];

  constructor() {
    this.albums = [];
  }

  ngOnInit(): void {
    this.albums = [
      {
        album_image: '/assets/extra-images/latest-album-1.jpg',
        album_count: 3,
        album_title: 'album_title1',
      },
      {
        album_image: '/assets/extra-images/latest-album-2.jpg',
        album_count: 4,
        album_title: 'album_title2',
      },
      {
        album_image: '/assets/extra-images/latest-album-3.jpg',
        album_count: 2,
        album_title: 'album_title2',
      },
      {
        album_image: '/assets/extra-images/latest-album-4.jpg',
        album_count: 3,
        album_title: 'album_title2',
      },
      {
        album_image: '/assets/extra-images/latest-album-1.jpg',
        album_count: 3,
        album_title: 'album_title1',
      },
      {
        album_image: '/assets/extra-images/latest-album-2.jpg',
        album_count: 4,
        album_title: 'album_title2',
      },
      {
        album_image: '/assets/extra-images/latest-album-3.jpg',
        album_count: 2,
        album_title: 'album_title2',
      },
      {
        album_image: '/assets/extra-images/latest-album-4.jpg',
        album_count: 3,
        album_title: 'album_title2',
      },
    ];
  }
}

Answer 1

[Дмитрий Беляев]

Вот здесь Вы пишите, что ожидаете массив из Album:

export class AlbumItemComponent implements OnInit {
  //@Input() public album: any;
  @Input() public album: Album[];

А вот тут передаете объекты Album по одному:

<div *ngFor="let album of albums">
  <app-album-item [album]="album"></app-album-item>
</div>

Comments

[Speakermen]

А как когда из родителя в потомка передать полностью albums? Мне только один объект нужен только как проверить с помощью интерфейса(

<li class="col-md-4">
  <div class="wm-latest-album-slide">
    <figure>
      <a href="album-single-post.html" class="graythumb"
        ><img [src]="album.album_image" alt=""
      /></a>
      <figcaption>
        <a href="album-single-post.html" class="wm-bgcolor"
          >{{ album.album_count }} Tracks</a
        >
      </figcaption>
    </figure>
    <div class="wm-latest-album-text">
      <h2><a href="album-single-post.html">{{ album.album_title }}</a></h2>
      <span></span>
      <div class="clearfix"></div>
      <a href="album-single-post.html" class="wm-bayalbum-btn wm-bgcolor"
        >read more</a
      >
    </div>
  </div>
</li>

Так TS ругается(

//Type '{}' is missing the following properties from type 'Album': album_image, album_count, album_title
import { Component, Input, OnInit } from '@angular/core';
import { Album } from '../../models/album';

@Component({
  selector: 'app-album-item',
  templateUrl: './album-item.component.html',
  styleUrls: ['./album-item.component.css'],
})
export class AlbumItemComponent implements OnInit {
  //@Input() public album: any;
  //@Input() public album: Album[];
  @Input() public album: Album;

  constructor() {
    //this.album = [];
    this.album = {};
  }

  ngOnInit(): void {
    console.log(this.album);
  }
}

[Дмитрий Беляев]

Speakermen, а на что ругается? на инициализацию? Я не особо знаю ангуляр, но мне кажется он должен из вне прийти.
В крайнем случае можно ts убедить в этом вот так:
@Input() public album!: Album;

[Speakermen]

Дмитрий Беляев, спасибо огромное работает! @Input() public album!: Album;

Да на инициализацию в constructore

constructor() {
    //this.album = [];
    this.album = {}; // В типе {} отсутствуют следующие свойства из типа 'Album': album_image, album_count, album_title
  }