@Speakermen

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

//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',
      },
    ];
  }
}
  • Вопрос задан
  • 30 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега TypeScript
Crazy on performance...
Вот здесь Вы пишите, что ожидаете массив из 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы