CODEWITHSUNDEEP
htmlangulartypescript
Demian
Demian

Reputation: 105

Angular NgFor Path Issue

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: Error Output

I really don't know what I'm 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
    }
}

Upvotes: 0

Views: 338

Answers (2)

Mehmet YILMAZ
Mehmet YILMAZ

Reputation: 111

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>

Upvotes: 0

deepakchethan
deepakchethan

Reputation: 5600

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[];

Upvotes: 1

Related Questions