Type 'object' is not assignable to type 'NgIterable<any> | null | undefined'

Question

    <!--app component.html-->
    <div class="position-relative container">
      <div class="row justify-content-center">
        <div class="card mt-sm-3 col-md-8">
          <div class="card-body">
            <h3 class="mb-0">Artist Directory</h3>
            <div class="form-group">
              <div class="form-label"><strong>For:</strong>
                {{ query }}
              </div>
              <input class="form-control mt-2" type="text">
            </div><!-- form-group -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- row -->
      <div class="position-absolute container" style="left: 0; z-index:10">
        <div class="row justify-content-center">
          <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"
                *ngFor="let artist of artists">
                  <div class="media">
                    <div class="media-body align-self-center">
                      <h5 class="m-0">{{ artist.name }}</h5>
                      {{ artist.reknown }}
                    </div><!-- media body -->
                  </div><!-- media -->
              </a><!-- link -->
            </div><!-- list-group -->
          </div><!-- col -->
        </div><!-- row -->
      </div><!-- container -->
    
    </div><!-- position -->

// app component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `
      .list-group-item:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 0;
      }
    `,
  ],
})
export class AppComponent {
  query: string
  artists: object
  constructor() {
    this.query = 'Barot'
    this.artists = [
      {
        name: 'Barot Bellingham',
        shortname: 'Barot_Bellingham',
        reknown: 'Royal Academy of Painting and Sculpture',
        bio: 'Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot\'s collection entitled "The Un-Collection" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different',
      },
      {
        name: 'Jonathan G. Ferrar II',
        shortname: 'Jonathan_Ferrar',
        reknown: 'Artist to Watch in 2012',
        bio: 'The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations',
      },
    ]
  }
}

I am trying to run the code above but getting error

Error: src/app/app.component.html:20:32 - error TS2322: Type 'object' is not assignable to type 'NgIterable | null | undefined'.

20 *ngFor="let artist of artists"> ~~

src/app/app.component.ts:5:15 5 templateUrl:'./app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

Raphaël Balet Raphaël Balet · Accepted Answer · 2021-05-27T06:26:16

artists:object isn't of type object, but type array

please do add this

artists: any[]

or consider create a type for your structure.

export interface Artist {
  name: string
  shortname: string
  reknown: string
  bio: string
}

export class AppComponent {
  query:string;
  artists: Artist[];
  // ...
}

Type 'object' is not assignable to type 'NgIterable<any> | null | undefined'

1 Answers