Angular中ngFor搭配slice管道和index时报unknown类型错误如何解决

• TS代码存在语法错误：getProjects()方法中直接返回services，缺少this指向类属性，正确写法应为return this.services，否则运行时无法正确获取数组内容。
• 类型检查问题：你将list声明为any类型，Angular开启严格类型检查时，slice管道处理无显式类型的数组后，返回的元素类型会被推断为unknown，访问item.logo时就会触发Object is of type 'unknown'报错，添加index变量时会触发更严格的模板类型检查，所以问题暴露出来。
• 你尝试的item.i.logo写法完全错误，index是ngFor暴露的局部变量，不属于item对象的属性，不需要加到item上。

推荐方案（显式类型约束，符合TypeScript规范） #

1. 先定义项目数据的接口，约束结构
2. 修正TS中的语法错误，给list、services添加显式类型
   修改后的TS代码如下：

// 接口放在component类外面即可
interface Project {
  slug: string;
  name: string;
  work: string;
  company: string;
  website: string;
  preview: string;
  logo: string;
}

@Component({
    selector: 'app-logo-section',
    templateUrl: './logo-section.component.html',
    styleUrls: ['./logo-section.component.scss']
})
export class LogoSectionComponent implements OnInit {
    // 显式声明list为Project数组类型
    list : Project[] = [];

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

    ngOnInit(): void 
    {
    }

    // 给services也加类型约束
    private services: Project[] = [{
        slug : "s-l-u-g",
        name : "name",
        work : "work",
        company : "company",
        website : "https://www.google.com",
        preview : "text",
        logo : "logo.svg"
    }]

    // 约束方法返回值类型
    getProjects(): Project[]
    {
        // 修正this指向
        return this.services;
    }
}

模板代码不需要调整，你原来的ngFor写法是正确的：

<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>

临时解决方案（不推荐，仅应急使用） #

如果暂时不想调整类型定义，可以在模板中用$any()包裹item消除类型报错：

[inlineSVG]="'./assets/image/projects/logo/' + $any(item).logo"

内容的提问来源于stack exchange，提问作者Demian