角度 12.错误 TS2339：类型 'EventTarget' 上不存在属性'value'

Question

我遵循pro angular 6第3版书籍教程，我发现很难解决$event.target值的问题。它应该是一个限制每页显示文章数量的选项。但是我不能让它工作，我现在的主要问题是我认为这个功能在angular 12中不再可用。

的代码如下:

…

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模板部分的问题…

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

…我很感激任何可能有帮助的解决方案。

Answer 1

兄弟，把$any放在$event.target前面就像($any($event.target).value)

完整代码

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

Answer 2

为什么不直接写:

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>

注意:你必须在你的模块中导入NgModule。

例如，在你的app.module.ts中:

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

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

Answer 3

正如angular文档中提到的

使用$event时。目标DOM事件(因为有可能事件冒泡，$ Event。DOM类型中的target没有类型在这种情况下，我们可以使用$any()类型强制转换函数选择退出对表达式

部分的类型检查。

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

Answer 4

inside (change)，你应该只传递$event。在逻辑内部，您应该使用event.target.value