html - fel TS2571: Objektet är av typen 'unknown' när man försöker använda pipe slice i *ngFor

Jag försöker använda NGB Pagination i min Angular-app i en tabell. Men när jag använder pipe slice i min *ngFor, får min Angular fel TS2571: Object är av typen 'unknown' när jag försöker slice. Detta är min kod:

  1. Min HTML-kod:
<tr *ngFor="let row of documentaryList|slice: (page-1) * pageSize : page * pageSize" class="text-md text-md-center">
                  <td>{{ row.documentDate }}</td>
                  <td><a class="text-info" routerLink="details-documentary/{{row._id}}">{{ row.documentName }}</a></td>
                  <td>{{ row.documentNumber }}</td>
                  <td>{{ row.documentType }}</td>
                  <td>{{ row.documentAddress }}</td>
                  <td>
  1. Min .ts-kod:
export class ListDocumentaryComponent implements OnInit {
  title = 'Documentary';
  documentaryList: any;
  page = 1;
  pageSize = 10;
  lengthDocumentList = 0;

  constructor(private documentaryService: DocumentaryService) {
  }

  ngOnInit(): void {
    this.getDocumentaryList();
  }

  getDocumentaryList(): any {
    this.documentaryService.getDocumentary()
      .subscribe((data: any) => {
        this.documentaryList = data.data;
        this.lengthDocumentList = this.documentaryList.length;
      });
  }

}

  1. Mitt objekt i konsolen:

  2. Och mitt fel:

Tack för din hjälp!

Svar #1

Ändra documentaryList: any; till documentaryList: any[]=[];

I TypeScript kan valet av typer ha en betydande påverkan på kvaliteten och tillförlitligheten i din kod. Medan typen any ger flexibilitet genom att tillåta en egenskap att innehålla värden av vilken typ som helst, avstår den också TypeScripts kärnfördel: typkontroll. Att använda any säger i princip till TypeScript att inaktivera typkontroll och anta minimala begränsningar, vilket kan leda till potentiella problem med typ-säkerhet och minskad kodklarhet. Genom att välja en mer specifik typ, såsom ett objekt, introducerar du mer struktur i din kod. Detta gör det möjligt för TypeScript att utföra typkontroll och ge meningsfulla IntelliSense-förslag och upptäcka typrelaterade fel vid kompileringstid istället för vid körning.

Svar #2

Ett annat sätt :

<tr *ngFor="let item of obj.list.slice((page-1) * pageSize, page * pageSize)" class="text-md text-md-center">
   <td>{{ item.prop1 }}</td>
   <td>{{ item.prop2 }}</td>
</tr>

Detta fungerar när den loopade listan är en egenskap hos ett objekt (typ any)

Relaterade artiklar