Angular NgFor Path Issue

Question

In my Angular Application i have a simple ngFor loop showing logo images like this:

<div *ngFor="let item of list" class="logo-wrapper">
          <div class="customer-logo">
            <span
              class="my-icon"
              aria-label="My icon"
              [inlineSVG]="'./assets/image/projects/logo/' + item.logo"
            ></span>
          </div>
        </div>

This is working fine: But: If i try to slice the Array to limit the output as follow:

<div *ngFor="let item of list | slice: 0:10; let i = index" class="logo-wrapper">
      <div class="customer-logo">
        <span
          class="my-icon"
          aria-label="My icon"
          [inlineSVG]="'./assets/image/projects/logo/' + item.logo"
        ></span>
      </div>
    </div>

I get this Error: " Object is of type 'unknown' ".

Error output:

I realy don't know what im doing wrong here. I hope someone can point me in the right direction.

Edit: The problem appears as soon as i add a index to the loop. i tried to add the index to the object like: item.i.logo but its also unknown.

PS: Here is my.ts-file

@Component({
  selector: 'app-logo-section',
  templateUrl: './logo-section.component.html',
  styleUrls: ['./logo-section.component.scss']
})
export class LogoSectionComponent implements OnInit {

  list : any

  constructor(
  ) {
    this.list = getProjects()
    console.log(this.list)

  }

  ngOnInit(): void {

  }


private services = [{
    slug : "s-l-u-g",
    name : "name",
    work : "work",
    company : "company",
    website : "https://www.google.com",
    preview : "text",
    logo : "logo.svg"
  }]

getProjects(){
return services
}





}

Answer 1

You would have to change the type of list to any[] instead of any . Update the declaration as follows in your typescript file.

list : any[];

Answer 2

It seems like the SlicePipe deprecates with the ng-inline-svg package because it uses HttpClientModule and works asynchronously .

if you use Array.slice method instead of the SlicePipe in the *ngFor it works fine.

Please find the Stackblitz example .

<div *ngFor="let item of list.slice(0, 10); let i = index" class="logo-wrapper">
  <div class="customer-logo">
    <span class="my-icon" aria-label="My icon" [inlineSVG]="item.logo"> </span>
  </div>
</div>