Angular NgFor 路徑問題

Question

在我的 Angular 應用程序中，我有一個簡單的 ngFor 循環，顯示如下徽標圖像：

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

這工作正常：但是：如果我嘗試對數組進行切片以限制 output 如下：

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

我收到此錯誤：“ Object 屬於‘未知’類型”。

錯誤 output：

我真的不知道我在這里做錯了什么。 我希望有人能指出我正確的方向。

編輯：一旦我向循環添加索引，問題就會出現。 我試圖將索引添加到 object 中，例如： item.i.logo ，但它也是未知的。

PS：這是 my.ts 文件

@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

您必須將list的類型更改為any[]而不是any 。 更新 typescript 文件中的聲明如下。

list : any[];

Answer 2

似乎SlicePipe不推薦使用ng-inline-svg package 因為它使用HttpClientModule並且asynchronously工作。

如果您使用Array.slice方法而不是*ngFor SlicePipe工作正常。

請查找Stackblitz 示例。

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