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
}
}
CodePudding user response:
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[];
CodePudding user response:
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>