html - Angular 12. fel TS2339: Egenskapen 'value' finns inte på typen 'EventTarget'

Jag följer handledningen i boken Pro Angular 6, 3:e upplagan, och jag har svårt att lösa problemet med värdet av ett $event.target. Det ska vara ett alternativ för att begränsa antalet artiklar som visas per sida, men jag kan inte få det att fungera. Mitt största problem just nu tror jag är att funktionen inte längre är tillgänglig i Angular 12.

ts-koden är som följer:

...

changePage(newPage: number){
    this.selectedPage = newPage;
}

changePageSize(newSize: number){
    this.productsPerPage = Number(newSize);
    this.changePage(1);
}

get pageNumbers(): number[]{
    return Array(Math.ceil(this.repository.getProducts(this.selectedCategory)
      .length / this.productsPerPage)).fill(0).map((x, i)=> i +1);
 }

...

enter code here

html-mall del med problemet ...

 <select class="form-control" [value]="productsPerPage"
    (change)="changePageSize($event.target.value)">
        <option value="3">3 per Page</option>
        <option value="4">4 per Page</option>
        <option value="6">6 per Page</option>
        <option value="8">8 per Page</option>
    </select>

... Jag uppskattar alla lösningar som kan hjälpa.

Svar #1

bro bara sätt $any före $event.target precis så ($any($event.target).value)

fullständig kod

 <select class="form-control" [value]="productsPerPage"
        (change)="changePageSize($any($event.target).value)">
            <option value="3">3 per Page</option>
            <option value="4">4 per Page</option>
            <option value="6">6 per Page</option>
            <option value="8">8 per Page</option>
        </select>

Svar #2

Varför sätter du inte bara:

HTML :

 <select class="form-control" [(ngModel)]="productsPerPage">
        <option value="3">3 per Page</option>
        <option value="4">4 per Page</option>
        <option value="6">6 per Page</option>
        <option value="8">8 per Page</option>
    </select>

OBS: Du måste importera NgModule i din modul.

Till exempel, i din app.module.ts:

...
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
...


imports: [
...
    FormsModule,
...
]

Relaterade artiklar